react-multi-fields-input

npmpackage.info

Gathering detailed insights and metrics for react-multi-fields-input

Other packages similar to react-multi-fields-input

react-country-state-city

1.1.11

A lightweight and easy-to-use React library that provides a comprehensive list of regions or continents, countries, states, cities languages, and country phone codes for creating dynamic and searchable dropdowns. Ideal for building forms and input fields

@teamteanpm2024/perferendis-dolore-temporibus

1.0.5

@teamteanpm2024/perferendis-dolore-temporibus is a Node.js module to mask various kinds of data. With the help of @teamteanpm2024/perferendis-dolore-temporibus, you can mask email, phone number, card number, JSON fields, password, etc... <br/>Also, it pr

@ryniaubenpm2/voluptatem-architecto-praesentium

1.0.0

A library of React components to render input fields that simplify displaying formatted numbers such as currency or telephone numbers.

Gathering detailed insights and metrics for react-multi-fields-input

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.

1<MultiFieldsInput 2 label="Sort Code" 3 name="codeSort" 4 inputs={[ 5 { 6 maxLength: 2, 7 placeholder: '00', 8 }, 9 { 10 maxLength: 2, 11 placeholder: '00', 12 }, 13 { 14 maxLength: 2, 15 placeholder: '00', 16 }, 17 ]} 18 value="202020" 19 error={`Invalid input`} 20 onBlur={() => {}} 21 onChange={() => {}} 22/>

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`	`{}`

prop

required

type

default

inputs

yes

Input[]

name

yes

string

onBlur

yes

function

onChange

function

undefined

error

string

''

value

string

''

autoFocus

boolean

true

styles

object

{}

Input[] is an array of objects with following properties

prop	required	type	default
maxLength	yes	`number`
placeholder	no	`string`	`''`

prop

required

type

default

maxLength

yes

number

placeholder

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.

1const styles = { 2 container: { 3 width: 'auto', 4 }, 5 label: { 6 width: '100%', 7 color: '#4A5568', 8 fontWeight: 'bold', 9 marginBottom: '0.3em', 10 fontSize: '15px', 11 display: 'block', 12 }, 13 inputContainer: { 14 display: 'flex', 15 justifyContent: 'space-between', 16 width: '100%', 17 }, 18 input: { 19 borderRadius: '5px', 20 padding: '0.75em 1em', 21 border: '1px solid #A0AEC0', 22 color: '#2D3748', 23 maxWidth: '7em', 24 }, 25 error: { 26 boxSizing: 'border-box', 27 marginTop: '0.7em', 28 padding: '0.75em 1em', 29 backgroundColor: '#FED7D7', 30 display: 'block', 31 borderRadius: '5px', 32 fontWeight: 'bold', 33 color: '#C53030', 34 fontSize: '13px', 35 width: '100%', 36 }, 37}

The object that is being returned onBlur and onChange:

1{ name: '', value: ''}

Other packages similar to react-multi-fields-input

Other packages similar to react-multi-fields-input

Installations

Developer Guide

Yes

CommonJS

14.3.0

6.14.5

Score

Pull Requests

0

9

5

4

Issues

2

4

2

Releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

Download Statistics

GitHub Statistics

Bundle Size

12.02 kB

4.48 kB

Maintainers

Package Meta Information

Total Downloads

4,787

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Multi Fields Input component

Props

Develop

Build

10

0

0

0

0

0

0

0

0

1.5

/10