react-multi-fields-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    React Multi Fields Input component

    codecov npm CircleCI

    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.

    Install

    npm i react-multi-fields-input

    DownloadsWeekly Downloads

    10

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    45.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • snikidev