mui-fast-start 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +403 -403
  2. package/README_KR.md +403 -403
  3. package/dist/components/Object/Select/ObjSelectRecord.d.ts +2 -1
  4. package/dist/components/Object/Select/ObjSelectRecord.d.ts.map +1 -1
  5. package/dist/components/Single/Select/SingleSelectRecord.d.ts +2 -1
  6. package/dist/components/Single/Select/SingleSelectRecord.d.ts.map +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/styles/FastStartProps.d.ts +2 -1
  9. package/dist/styles/FastStartProps.d.ts.map +1 -1
  10. package/dist/types/props.d.ts +1 -1
  11. package/dist/types/props.d.ts.map +1 -1
  12. package/dist/types/provider.d.ts +2 -1
  13. package/dist/types/provider.d.ts.map +1 -1
  14. package/examples/basic/README.md +73 -73
  15. package/examples/basic/eslint.config.js +23 -23
  16. package/examples/basic/index.html +13 -13
  17. package/examples/basic/package.json +37 -37
  18. package/examples/basic/src/App.css +4 -4
  19. package/examples/basic/src/App.tsx +28 -28
  20. package/examples/basic/src/index.css +29 -29
  21. package/examples/basic/src/main.tsx +50 -50
  22. package/examples/basic/src/pages/ObjPage.tsx +175 -175
  23. package/examples/basic/src/pages/SinglePage.tsx +137 -137
  24. package/examples/basic/tsconfig.app.json +43 -43
  25. package/examples/basic/tsconfig.json +7 -7
  26. package/examples/basic/tsconfig.node.json +40 -40
  27. package/examples/basic/vite.config.ts +28 -28
  28. package/mui-fast-start-0.1.4.tgz +0 -0
  29. package/package.json +67 -67
  30. package/src/components/Object/Checkbox/ObjCheckIcon.tsx +29 -29
  31. package/src/components/Object/Checkbox/ObjCheckbox.tsx +31 -31
  32. package/src/components/Object/Select/ObjSelectOne.tsx +33 -33
  33. package/src/components/Object/Select/ObjSelectRecord.tsx +33 -33
  34. package/src/components/Object/Textfield/ObjNumber.tsx +51 -51
  35. package/src/components/Object/Textfield/ObjText.tsx +29 -29
  36. package/src/components/Single/Checkbox/SingleCheckIcon.tsx +27 -27
  37. package/src/components/Single/Checkbox/SingleCheckbox.tsx +33 -33
  38. package/src/components/Single/Select/BaseSingleSelect.tsx +45 -45
  39. package/src/components/Single/Select/SingleSelectOne.tsx +56 -56
  40. package/src/components/Single/Select/SingleSelectRecord.tsx +51 -51
  41. package/src/components/Single/TextField/SingleNumber.tsx +18 -18
  42. package/src/components/Single/TextField/SingleText.tsx +13 -13
  43. package/src/components/index.ts +15 -15
  44. package/src/hooks/index.ts +3 -3
  45. package/src/hooks/splits/useSplitNumberProps.ts +161 -161
  46. package/src/hooks/splits/useSplitTextProps.ts +36 -36
  47. package/src/hooks/state/useObjToSingle.ts +24 -24
  48. package/src/index.ts +7 -7
  49. package/src/styles/FastStartProps.ts +82 -81
  50. package/src/styles/FastStartProvider.tsx +25 -25
  51. package/src/types/index.ts +3 -3
  52. package/src/types/props.internal.ts +21 -21
  53. package/src/types/props.ts +81 -81
  54. package/src/types/provider.ts +72 -71
  55. package/src/types/types.ts +9 -9
  56. package/src/utils/index.ts +2 -2
  57. package/src/utils/number/calculate.ts +102 -102
  58. package/src/utils/object/error.ts +15 -15
  59. package/src/utils/object/merge.ts +47 -47
  60. package/tsconfig.json +34 -34
  61. package/tsconfig.lib.json +9 -9
  62. package/vite.config.ts +35 -35
package/README.md CHANGED
@@ -1,403 +1,403 @@
1
- # Mui Fast Start
2
-
3
- [한국어 (Korean)](./README_KR.md)
4
-
5
- This library is built on [MUI](https://mui.com/) and [React](https://react.dev/), and is licensed under the MIT License.
6
-
7
- It was developed for rapid development, aiming to reduce repetitive or similar code patterns.
8
-
9
- # Example
10
- ### Usage
11
- This library extends the props of MUI/React components.
12
- You can use the original props along with the additional props defined by mui-fast-start.
13
-
14
- For example, if MUI's TextField is used like this:
15
- ```tsx
16
- import TextField from '@mui/material/TextField';
17
-
18
- <TextField
19
- id="outlined-basic"
20
- label="Outlined"
21
- variant="outlined"
22
- />
23
- ```
24
- With mui-fast-start's extended props (`get`, `set`), you can use it as follows while maintaining the original props syntax:
25
- ```tsx
26
- import { SingleText } from "mui-fast-start";
27
-
28
- <SingleText
29
- id="outlined-basic"
30
- label="Outlined"
31
- variant="outlined"
32
- get={text} set={setText}
33
- />
34
- ```
35
-
36
-
37
-
38
- # Doc
39
- ## FastStartProvider
40
- A Provider that defines default **props** to inject.
41
- Priority order is `default values > createDefaultProps > component props`. If no props are specified, the props defined here will be applied globally.
42
-
43
- This component has MUI's ThemeProvider built-in, so be careful not to use ThemeProvider again.
44
-
45
- Example:
46
- ```tsx
47
- import {createTheme, CssBaseline} from "@mui/material";
48
- import { createMfsProps } from 'mui-fast-start/styles';
49
- import { FastStartProvider } from 'mui-fast-start';
50
-
51
- const theme = createTheme();
52
- const mfsProps = createMfsProps({
53
- Single: {
54
- MfsText: {
55
- maxLength: 255
56
- }
57
- },
58
- Object: {
59
- MfsText: {
60
- maxLength: 255
61
- }
62
- }
63
- });
64
-
65
- <FastStartProvider
66
- defaultProps={mfsProps}
67
- theme={theme}
68
- defaultMode='dark'
69
- >
70
- <CssBaseline/>
71
- <StrictMode>
72
- <App/>
73
- </StrictMode>
74
- </FastStartProvider>
75
- ```
76
-
77
- ## Single
78
- Single components are used with a single useState.
79
-
80
- In MUI, you would originally create value and onChange functions like this:
81
-
82
- **MUI Example**
83
- ```tsx
84
- import React, { useState } from "react";
85
- import TextField from '@mui/material/TextField';
86
-
87
- const [text, setText] = useState<string>('');
88
-
89
- const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
90
- setText(e.target.value);
91
- }
92
-
93
- <TextField
94
- fullWidth={true}
95
- autoComplete="off"
96
- size="small"
97
- variant="outlined"
98
- label="Text"
99
- value={text}
100
- onChange={handleTextChange}
101
- slotProps={{
102
- htmlInput: {
103
- maxLength: 10,
104
- }
105
- }}
106
- />
107
- ```
108
-
109
- **mui-fast-start Example**
110
- ```tsx
111
- import { SingleText } from "mui-fast-start";
112
-
113
- const [text, setText] = useState<string>('');
114
-
115
- <SingleText
116
- label='Text'
117
- maxLength={10}
118
- get={text} set={setText}
119
- />
120
- ```
121
-
122
- ## Obj
123
- The `name` prop is required and values are changed based on the name.
124
-
125
- Components that receive an object type, where the object's key is specified as the name prop.
126
-
127
-
128
- **MUI Example**
129
- ```tsx
130
- import React, { useState } from "react";
131
- import TextField from '@mui/material/TextField';
132
-
133
- type TempType = {
134
- check1: boolean,
135
- check2: boolean,
136
- float: number,
137
- integer: number,
138
- tempText: string
139
- }
140
-
141
- const [temp, setTemp] = useState<TempType>({
142
- check1: false,
143
- check2: false,
144
- float: 0,
145
- integer: 0,
146
- tempText: ''
147
- });
148
-
149
- const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
150
- setTemp({...temp, tempText: e.target.value});
151
- }
152
-
153
- <TextField
154
- fullWidth={true}
155
- autoComplete="off"
156
- size="small"
157
- variant="outlined"
158
- label='Test'
159
- value={temp.tempText}
160
- onChange={handleTextChange}
161
- />
162
- ```
163
-
164
- **mui-fast-start Example**
165
- ```tsx
166
- import React, { useState } from "react";
167
- import { ObjText } from "mui-fast-start";
168
-
169
- type TempType = {
170
- check1: boolean,
171
- check2: boolean,
172
- float: number,
173
- integer: number,
174
- tempText: string
175
- }
176
-
177
- const [temp, setTemp] = useState<TempType>({
178
- check1: false,
179
- check2: false,
180
- float: 0,
181
- integer: 0,
182
- tempText: ''
183
- });
184
-
185
- <ObjText<TempType>
186
- label='Text'
187
- name='tempText'
188
- get={temp}
189
- set={setTemp}
190
- />
191
- ```
192
-
193
-
194
- # Props
195
- ### SingleFloat
196
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
197
-
198
- | Name | Type | Default | Description |
199
- |:-:|:-:|:-:|:-:|
200
- | get | number | (required) | First value of useState |
201
- | set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
202
- | label | React.ReactNode | - | Label content |
203
- | err | string | - | Error message |
204
- | minLength | number | - | Minimum input length |
205
- | maxLength | number | - | Maximum input length |
206
- | startAdornment | React.ReactNode | - | Start InputAdornment |
207
- | endAdornment | React.ReactNode | - | End InputAdornment |
208
- | def | number | 0 | Default value when input format is invalid |
209
- | min | number | - | Minimum value |
210
- | max | number | - | Maximum value |
211
- | step | number | 0.01 | Step increment size |
212
-
213
- ### SingleInteger
214
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
215
-
216
- | Name | Type | Default | Description |
217
- |:-:|:-:|:-:|:-:|
218
- | get | number | (required) | First value of useState |
219
- | set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
220
- | label | React.ReactNode | - | Label content |
221
- | err | string | - | Error message |
222
- | minLength | number | - | Minimum input length |
223
- | maxLength | number | - | Maximum input length |
224
- | startAdornment | React.ReactNode | - | Start InputAdornment |
225
- | endAdornment | React.ReactNode | - | End InputAdornment |
226
- | def | number | 0 | Default value when input format is invalid |
227
- | min | number | - | Minimum value |
228
- | max | number | - | Maximum value |
229
- | step | number | 1 | Step increment size |
230
-
231
-
232
- ### SingleText
233
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
234
-
235
- | Name | Type | Default | Description |
236
- |:-:|:-:|:-:|:-:|
237
- | get | string | (required) | First value of useState |
238
- | set | Dispatch<SetStateAction<string>> | (required) | Second value of useState |
239
- | label | React.ReactNode | - | Label content |
240
- | err | string | - | Error message |
241
- | minLength | number | - | Minimum input length |
242
- | maxLength | number | - | Maximum input length |
243
- | startAdornment | React.ReactNode | - | Start InputAdornment |
244
- | endAdornment | React.ReactNode | - | End InputAdornment |
245
-
246
- ### SingleCheckbox
247
- Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
248
-
249
- | Name | Type | Default | Description |
250
- |:-:|:-:|:-:|:-:|
251
- | get | boolean | (required) | First value of useState |
252
- | set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
253
- | label | React.ReactNode | - | Label content |
254
-
255
- ### SingleCheckIcon
256
- Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
257
-
258
- | Name | Type | Default | Description |
259
- |:-:|:-:|:-:|:-:|
260
- | get | boolean | (required) | First value of useState |
261
- | set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
262
- | on | React.ReactNode | (required) | Node displayed when true |
263
- | off | React.ReactNode | (required) | Node displayed when false |
264
-
265
- ### SingleSelectOne
266
- Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
267
-
268
- | Name | Type | Default | Description |
269
- |:-:|:-:|:-:|:-:|
270
- | get | any | (required) | First value of useState |
271
- | set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
272
- | label | React.ReactNode | - | Label content |
273
- | err | string | - | Error message |
274
- | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
275
- | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
276
- | items | any[] | (required) | Selectable items |
277
- | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
278
- | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
279
-
280
- ### SingleSelectRecord
281
- Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
282
-
283
- | Name | Type | Default | Description |
284
- |:-:|:-:|:-:|:-:|
285
- | get | any | (required) | First value of useState |
286
- | set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
287
- | label | React.ReactNode | - | Label content |
288
- | err | string | - | Error message |
289
- | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
290
- | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
291
- | items | any[] | (required) | Selectable items |
292
- | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
293
- | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
294
-
295
- ----
296
-
297
-
298
- ### ObjNumber
299
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
300
-
301
- | Name | Type | Default | Description |
302
- |:-:|:-:|:-:|:-:|
303
- | get | object | (required) | First value of useState |
304
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
305
- | name | string | (required) | Object key name |
306
- | label | React.ReactNode | - | Label content |
307
- | err | object | - | Error message |
308
- | minLength | number | - | Minimum input length |
309
- | maxLength | number | - | Maximum input length |
310
- | startAdornment | React.ReactNode | - | Start InputAdornment |
311
- | endAdornment | React.ReactNode | - | End InputAdornment |
312
- | def | number | 0 | Default value when input format is invalid |
313
- | min | number | - | Minimum value |
314
- | max | number | - | Maximum value |
315
- | step | number | 0.01 | Step increment size |
316
-
317
- ### ObjInteger
318
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
319
-
320
- | Name | Type | Default | Description |
321
- |:-:|:-:|:-:|:-:|
322
- | get | object | (required) | First value of useState |
323
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
324
- | name | string | (required) | Object key name |
325
- | label | React.ReactNode | - | Label content |
326
- | err | object | - | Error message |
327
- | minLength | number | - | Minimum input length |
328
- | maxLength | number | - | Maximum input length |
329
- | startAdornment | React.ReactNode | - | Start InputAdornment |
330
- | endAdornment | React.ReactNode | - | End InputAdornment |
331
- | def | number | 0 | Default value when input format is invalid |
332
- | min | number | - | Minimum value |
333
- | max | number | - | Maximum value |
334
- | step | number | 1 | Step increment size |
335
-
336
- ### ObjText
337
- Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
338
-
339
- | Name | Type | Default | Description |
340
- |:-:|:-:|:-:|:-:|
341
- | get | object | (required) | First value of useState |
342
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
343
- | name | string | (required) | Object key name |
344
- | label | React.ReactNode | - | Label content |
345
- | err | object | - | Error message |
346
- | minLength | number | - | Minimum input length |
347
- | maxLength | number | - | Maximum input length |
348
- | startAdornment | React.ReactNode | - | Start InputAdornment |
349
- | endAdornment | React.ReactNode | - | End InputAdornment |
350
-
351
- ### ObjCheckbox
352
- Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
353
-
354
- | Name | Type | Default | Description |
355
- |:-:|:-:|:-:|:-:|
356
- | get | object | (required) | First value of useState |
357
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
358
- | name | string | (required) | Object key name |
359
- | label | React.ReactNode | - | Label content |
360
-
361
- ### ObjCheckIcon
362
- Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
363
-
364
- | Name | Type | Default | Description |
365
- |:-:|:-:|:-:|:-:|
366
- | get | object | (required) | First value of useState |
367
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
368
- | name | string | (required) | Object key name |
369
- | on | React.ReactNode | (required) | Node displayed when true |
370
- | off | React.ReactNode | (required) | Node displayed when false |
371
-
372
- ### ObjSelectOne
373
- Extended props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
374
-
375
- | Name | Type | Default | Description |
376
- |:-:|:-:|:-:|:-:|
377
- | get | object | (required) | First value of useState |
378
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
379
- | name | string | (required) | Object key name |
380
- | label | React.ReactNode | - | Label content |
381
- | err | object | - | Error message |
382
- | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
383
- | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
384
- | items | any[] | (required) | Selectable items |
385
- | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
386
- | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
387
-
388
- ### ObjSelectRecord
389
- Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
390
-
391
- | Name | Type | Default | Description |
392
- |:-:|:-:|:-:|:-:|
393
- | get | object | (required) | First value of useState |
394
- | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
395
- | name | string | (required) | Object key name |
396
- | label | React.ReactNode | - | Label content |
397
- | err | object | - | Error message |
398
- | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
399
- | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
400
- | items | any[] | (required) | Selectable items |
401
- | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
402
- | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
403
-
1
+ # Mui Fast Start
2
+
3
+ [한국어 (Korean)](./README_KR.md)
4
+
5
+ This library is built on [MUI](https://mui.com/) and [React](https://react.dev/), and is licensed under the MIT License.
6
+
7
+ It was developed for rapid development, aiming to reduce repetitive or similar code patterns.
8
+
9
+ # Example
10
+ ### Usage
11
+ This library extends the props of MUI/React components.
12
+ You can use the original props along with the additional props defined by mui-fast-start.
13
+
14
+ For example, if MUI's TextField is used like this:
15
+ ```tsx
16
+ import TextField from '@mui/material/TextField';
17
+
18
+ <TextField
19
+ id="outlined-basic"
20
+ label="Outlined"
21
+ variant="outlined"
22
+ />
23
+ ```
24
+ With mui-fast-start's extended props (`get`, `set`), you can use it as follows while maintaining the original props syntax:
25
+ ```tsx
26
+ import { SingleText } from "mui-fast-start";
27
+
28
+ <SingleText
29
+ id="outlined-basic"
30
+ label="Outlined"
31
+ variant="outlined"
32
+ get={text} set={setText}
33
+ />
34
+ ```
35
+
36
+
37
+
38
+ # Doc
39
+ ## FastStartProvider
40
+ A Provider that defines default **props** to inject.
41
+ Priority order is `default values > createDefaultProps > component props`. If no props are specified, the props defined here will be applied globally.
42
+
43
+ This component has MUI's ThemeProvider built-in, so be careful not to use ThemeProvider again.
44
+
45
+ Example:
46
+ ```tsx
47
+ import {createTheme, CssBaseline} from "@mui/material";
48
+ import { createMfsProps } from 'mui-fast-start/styles';
49
+ import { FastStartProvider } from 'mui-fast-start';
50
+
51
+ const theme = createTheme();
52
+ const mfsProps = createMfsProps({
53
+ Single: {
54
+ MfsText: {
55
+ maxLength: 255
56
+ }
57
+ },
58
+ Object: {
59
+ MfsText: {
60
+ maxLength: 255
61
+ }
62
+ }
63
+ });
64
+
65
+ <FastStartProvider
66
+ defaultProps={mfsProps}
67
+ theme={theme}
68
+ defaultMode='dark'
69
+ >
70
+ <CssBaseline/>
71
+ <StrictMode>
72
+ <App/>
73
+ </StrictMode>
74
+ </FastStartProvider>
75
+ ```
76
+
77
+ ## Single
78
+ Single components are used with a single useState.
79
+
80
+ In MUI, you would originally create value and onChange functions like this:
81
+
82
+ **MUI Example**
83
+ ```tsx
84
+ import React, { useState } from "react";
85
+ import TextField from '@mui/material/TextField';
86
+
87
+ const [text, setText] = useState<string>('');
88
+
89
+ const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
90
+ setText(e.target.value);
91
+ }
92
+
93
+ <TextField
94
+ fullWidth={true}
95
+ autoComplete="off"
96
+ size="small"
97
+ variant="outlined"
98
+ label="Text"
99
+ value={text}
100
+ onChange={handleTextChange}
101
+ slotProps={{
102
+ htmlInput: {
103
+ maxLength: 10,
104
+ }
105
+ }}
106
+ />
107
+ ```
108
+
109
+ **mui-fast-start Example**
110
+ ```tsx
111
+ import { SingleText } from "mui-fast-start";
112
+
113
+ const [text, setText] = useState<string>('');
114
+
115
+ <SingleText
116
+ label='Text'
117
+ maxLength={10}
118
+ get={text} set={setText}
119
+ />
120
+ ```
121
+
122
+ ## Obj
123
+ The `name` prop is required and values are changed based on the name.
124
+
125
+ Components that receive an object type, where the object's key is specified as the name prop.
126
+
127
+
128
+ **MUI Example**
129
+ ```tsx
130
+ import React, { useState } from "react";
131
+ import TextField from '@mui/material/TextField';
132
+
133
+ type TempType = {
134
+ check1: boolean,
135
+ check2: boolean,
136
+ float: number,
137
+ integer: number,
138
+ tempText: string
139
+ }
140
+
141
+ const [temp, setTemp] = useState<TempType>({
142
+ check1: false,
143
+ check2: false,
144
+ float: 0,
145
+ integer: 0,
146
+ tempText: ''
147
+ });
148
+
149
+ const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
150
+ setTemp({...temp, tempText: e.target.value});
151
+ }
152
+
153
+ <TextField
154
+ fullWidth={true}
155
+ autoComplete="off"
156
+ size="small"
157
+ variant="outlined"
158
+ label='Test'
159
+ value={temp.tempText}
160
+ onChange={handleTextChange}
161
+ />
162
+ ```
163
+
164
+ **mui-fast-start Example**
165
+ ```tsx
166
+ import React, { useState } from "react";
167
+ import { ObjText } from "mui-fast-start";
168
+
169
+ type TempType = {
170
+ check1: boolean,
171
+ check2: boolean,
172
+ float: number,
173
+ integer: number,
174
+ tempText: string
175
+ }
176
+
177
+ const [temp, setTemp] = useState<TempType>({
178
+ check1: false,
179
+ check2: false,
180
+ float: 0,
181
+ integer: 0,
182
+ tempText: ''
183
+ });
184
+
185
+ <ObjText<TempType>
186
+ label='Text'
187
+ name='tempText'
188
+ get={temp}
189
+ set={setTemp}
190
+ />
191
+ ```
192
+
193
+
194
+ # Props
195
+ ### SingleFloat
196
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
197
+
198
+ | Name | Type | Default | Description |
199
+ |:-:|:-:|:-:|:-:|
200
+ | get | number | (required) | First value of useState |
201
+ | set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
202
+ | label | React.ReactNode | - | Label content |
203
+ | err | string | - | Error message |
204
+ | minLength | number | - | Minimum input length |
205
+ | maxLength | number | - | Maximum input length |
206
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
207
+ | endAdornment | React.ReactNode | - | End InputAdornment |
208
+ | def | number | 0 | Default value when input format is invalid |
209
+ | min | number | - | Minimum value |
210
+ | max | number | - | Maximum value |
211
+ | step | number | 0.01 | Step increment size |
212
+
213
+ ### SingleInteger
214
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
215
+
216
+ | Name | Type | Default | Description |
217
+ |:-:|:-:|:-:|:-:|
218
+ | get | number | (required) | First value of useState |
219
+ | set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
220
+ | label | React.ReactNode | - | Label content |
221
+ | err | string | - | Error message |
222
+ | minLength | number | - | Minimum input length |
223
+ | maxLength | number | - | Maximum input length |
224
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
225
+ | endAdornment | React.ReactNode | - | End InputAdornment |
226
+ | def | number | 0 | Default value when input format is invalid |
227
+ | min | number | - | Minimum value |
228
+ | max | number | - | Maximum value |
229
+ | step | number | 1 | Step increment size |
230
+
231
+
232
+ ### SingleText
233
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
234
+
235
+ | Name | Type | Default | Description |
236
+ |:-:|:-:|:-:|:-:|
237
+ | get | string | (required) | First value of useState |
238
+ | set | Dispatch<SetStateAction<string>> | (required) | Second value of useState |
239
+ | label | React.ReactNode | - | Label content |
240
+ | err | string | - | Error message |
241
+ | minLength | number | - | Minimum input length |
242
+ | maxLength | number | - | Maximum input length |
243
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
244
+ | endAdornment | React.ReactNode | - | End InputAdornment |
245
+
246
+ ### SingleCheckbox
247
+ Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
248
+
249
+ | Name | Type | Default | Description |
250
+ |:-:|:-:|:-:|:-:|
251
+ | get | boolean | (required) | First value of useState |
252
+ | set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
253
+ | label | React.ReactNode | - | Label content |
254
+
255
+ ### SingleCheckIcon
256
+ Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
257
+
258
+ | Name | Type | Default | Description |
259
+ |:-:|:-:|:-:|:-:|
260
+ | get | boolean | (required) | First value of useState |
261
+ | set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
262
+ | on | React.ReactNode | (required) | Node displayed when true |
263
+ | off | React.ReactNode | (required) | Node displayed when false |
264
+
265
+ ### SingleSelectOne
266
+ Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
267
+
268
+ | Name | Type | Default | Description |
269
+ |:-:|:-:|:-:|:-:|
270
+ | get | any | (required) | First value of useState |
271
+ | set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
272
+ | label | React.ReactNode | - | Label content |
273
+ | err | string | - | Error message |
274
+ | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
275
+ | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
276
+ | items | any[] | (required) | Selectable items |
277
+ | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
278
+ | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
279
+
280
+ ### SingleSelectRecord
281
+ Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
282
+
283
+ | Name | Type | Default | Description |
284
+ |:-:|:-:|:-:|:-:|
285
+ | get | any | (required) | First value of useState |
286
+ | set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
287
+ | label | React.ReactNode | - | Label content |
288
+ | err | string | - | Error message |
289
+ | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
290
+ | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
291
+ | items | any[] | (required) | Selectable items |
292
+ | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
293
+ | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
294
+
295
+ ----
296
+
297
+
298
+ ### ObjNumber
299
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
300
+
301
+ | Name | Type | Default | Description |
302
+ |:-:|:-:|:-:|:-:|
303
+ | get | object | (required) | First value of useState |
304
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
305
+ | name | string | (required) | Object key name |
306
+ | label | React.ReactNode | - | Label content |
307
+ | err | object | - | Error message |
308
+ | minLength | number | - | Minimum input length |
309
+ | maxLength | number | - | Maximum input length |
310
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
311
+ | endAdornment | React.ReactNode | - | End InputAdornment |
312
+ | def | number | 0 | Default value when input format is invalid |
313
+ | min | number | - | Minimum value |
314
+ | max | number | - | Maximum value |
315
+ | step | number | 0.01 | Step increment size |
316
+
317
+ ### ObjInteger
318
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
319
+
320
+ | Name | Type | Default | Description |
321
+ |:-:|:-:|:-:|:-:|
322
+ | get | object | (required) | First value of useState |
323
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
324
+ | name | string | (required) | Object key name |
325
+ | label | React.ReactNode | - | Label content |
326
+ | err | object | - | Error message |
327
+ | minLength | number | - | Minimum input length |
328
+ | maxLength | number | - | Maximum input length |
329
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
330
+ | endAdornment | React.ReactNode | - | End InputAdornment |
331
+ | def | number | 0 | Default value when input format is invalid |
332
+ | min | number | - | Minimum value |
333
+ | max | number | - | Maximum value |
334
+ | step | number | 1 | Step increment size |
335
+
336
+ ### ObjText
337
+ Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
338
+
339
+ | Name | Type | Default | Description |
340
+ |:-:|:-:|:-:|:-:|
341
+ | get | object | (required) | First value of useState |
342
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
343
+ | name | string | (required) | Object key name |
344
+ | label | React.ReactNode | - | Label content |
345
+ | err | object | - | Error message |
346
+ | minLength | number | - | Minimum input length |
347
+ | maxLength | number | - | Maximum input length |
348
+ | startAdornment | React.ReactNode | - | Start InputAdornment |
349
+ | endAdornment | React.ReactNode | - | End InputAdornment |
350
+
351
+ ### ObjCheckbox
352
+ Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
353
+
354
+ | Name | Type | Default | Description |
355
+ |:-:|:-:|:-:|:-:|
356
+ | get | object | (required) | First value of useState |
357
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
358
+ | name | string | (required) | Object key name |
359
+ | label | React.ReactNode | - | Label content |
360
+
361
+ ### ObjCheckIcon
362
+ Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
363
+
364
+ | Name | Type | Default | Description |
365
+ |:-:|:-:|:-:|:-:|
366
+ | get | object | (required) | First value of useState |
367
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
368
+ | name | string | (required) | Object key name |
369
+ | on | React.ReactNode | (required) | Node displayed when true |
370
+ | off | React.ReactNode | (required) | Node displayed when false |
371
+
372
+ ### ObjSelectOne
373
+ Extended props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
374
+
375
+ | Name | Type | Default | Description |
376
+ |:-:|:-:|:-:|:-:|
377
+ | get | object | (required) | First value of useState |
378
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
379
+ | name | string | (required) | Object key name |
380
+ | label | React.ReactNode | - | Label content |
381
+ | err | object | - | Error message |
382
+ | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
383
+ | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
384
+ | items | any[] | (required) | Selectable items |
385
+ | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
386
+ | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
387
+
388
+ ### ObjSelectRecord
389
+ Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
390
+
391
+ | Name | Type | Default | Description |
392
+ |:-:|:-:|:-:|:-:|
393
+ | get | object | (required) | First value of useState |
394
+ | set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
395
+ | name | string | (required) | Object key name |
396
+ | label | React.ReactNode | - | Label content |
397
+ | err | object | - | Error message |
398
+ | emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
399
+ | emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
400
+ | items | any[] | (required) | Selectable items |
401
+ | renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
402
+ | getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
403
+