react-multi-fields-input
v1.0.0
Published
React ulti Fields (single value) Input component
Downloads
259
Readme
React Multi Fields Input component
React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
<MultiFieldsInput
label="Sort Code"
name="codeSort"
inputs={[
{
maxLength: 2,
placeholder: '00',
},
{
maxLength: 2,
placeholder: '00',
},
{
maxLength: 2,
placeholder: '00',
},
]}
value="202020"
error={`Invalid input`}
onBlur={() => {}}
onChange={() => {}}
/>
See more live examples on the website.
Props
| prop | required | type | default |
| --------- | :------: | :--------: | ----------- |
| inputs | yes | Input[]
| |
| name | yes | string
| |
| onBlur | yes | function
| |
| onChange | no | function
| undefined
|
| error | no | string
| ''
|
| value | no | string
| ''
|
| autoFocus | no | boolean
| true
|
| styles | no | object
| {}
|
Input[]
is an array of objects with following properties
| prop | required | type | default |
| ----------- | :------: | :------: | ------- |
| maxLength | yes | number
| |
| placeholder | no | string
| ''
|
styles
prop is an object with properties to style each part of the component. You could then give it custom styles as you normally would for inline, e.g.
const styles = {
container: {
width: 'auto',
},
label: {
width: '100%',
color: '#4A5568',
fontWeight: 'bold',
marginBottom: '0.3em',
fontSize: '15px',
display: 'block',
},
inputContainer: {
display: 'flex',
justifyContent: 'space-between',
width: '100%',
},
input: {
borderRadius: '5px',
padding: '0.75em 1em',
border: '1px solid #A0AEC0',
color: '#2D3748',
maxWidth: '7em',
},
error: {
boxSizing: 'border-box',
marginTop: '0.7em',
padding: '0.75em 1em',
backgroundColor: '#FED7D7',
display: 'block',
borderRadius: '5px',
fontWeight: 'bold',
color: '#C53030',
fontSize: '13px',
width: '100%',
},
}
The object that is being returned onBlur
and onChange
:
{ name: '', value: ''}
Develop
yarn
yarn start
Storybook starts on localhost:3001
.
Build
yarn build
Build script builds component only. Storybook is built with storybook:build
by Netlify.