react-multi-fields-input v1.0.0

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

Input[] is an array of objects with following properties

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.