0.1.43 • Published 4 months ago
@josipp/react-form v0.1.43
@josipp/react-form
React from that uses react-hook-form with Material UI components. At the moment, supported fields are: text, date, select and checkbox.
Install
npm i @josipp/react-form
Basic Usage
import React from 'react';
import { Paper } from '@mui/material';
import { Form } from '@josipp/react-form';
// default input type is text, other types are: date, select and checkbox
// for select input type, data is required
// you can pass helperText to types: text, checkbox and date
const inputRules = [
{
name: 'email',
label: 'E-mail',
rules: {
required: 'This field is required',
maxLength: {
value: 255,
},
minLength: {
value: 1,
},
pattern: {
value: /^\S+@\S+$/,
message: 'Please provide a properly formatted email address',
},
},
},
{
name: 'date',
label: 'Date',
input: 'date',
rules: {
required: 'This field is required',
},
},
{
name: 'checkbox',
label: 'Checkbox',
input: 'checkbox',
},
{
name: 'gender',
label: 'Gender',
input: 'select',
data: {
data: [
{ pk: 'm', gender: 'Male' },
{ pk: 'f', gender: 'Female' },
],
value: 'pk',
label: 'gender',
},
rules: {
required: 'This field is required',
},
},
];
function App() {
const handleSubmit = data => {
console.log(data);
// { checkbox: false, gender: 'm', email: 'test@test.com', date: JS Date object }
};
return (
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '2rem' }}>
<Paper sx={{ width: '30rem', margin: '1rem' }}>
<Form inputs={inputRules} btnMessage='Add' onSubmit={handleSubmit} />
</Paper>
</div>
);
}
export default App;
0.1.42
4 months ago
0.1.43
4 months ago
0.1.34
4 months ago
0.1.35
4 months ago
0.1.36
4 months ago
0.1.37
4 months ago
0.1.41
4 months ago
0.1.40
4 months ago
0.1.38
4 months ago
0.1.39
4 months ago
0.1.30
7 months ago
0.1.31
7 months ago
0.1.32
7 months ago
0.1.27
8 months ago
0.1.28
8 months ago
0.1.29
7 months ago
0.1.20
9 months ago
0.1.21
9 months ago
0.1.22
9 months ago
0.1.23
9 months ago
0.1.24
8 months ago
0.1.25
8 months ago
0.1.18
1 year ago
0.1.19
1 year ago
0.1.11
2 years ago
0.1.13
2 years ago
0.1.14
2 years ago
0.1.15
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago