React Dynamic Inputs Component

The react-dynamic-inputs component allows you to create a dynamic list of input fields where users can add or remove input items. It is highly customizable with support for a custom layout, input validation, and dynamic item addition/removal.

🌐 Demo

Checkout Demo of react-dynamic-inputs

Properties

Property	Type	Description
`onChange`	`(values: string[]) => void`	A callback function that is triggered when the values in the input fields change. It receives an array of updated values as a parameter.
`children`	`(inputProps: { handleOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void; defaultValue: string }, removeButtonProps: { handleOnClick: (e: React.MouseEvent<HTMLElement>) => void; disabled: boolean }) => React.ReactElement`	A custom render function that allows you to pass custom input fields and remove buttons. The function receives `inputProps` and `removeButtonProps` for customization.
`defaultValues`	`string[]`	Give Default Values of the Input(s). If given value count is smaller than defaultItemsCount, no default Value will be given. Useful when component rendering based on condition
`defaultItemsCount`	`number`	The number of input fields to be initially displayed. Default is 2.
`minItems`	`number`	The minimum number of input fields that should be allowed. Default is 0.
`maxItems`	`number` \| `null`	The maximum number of input fields allowed. If set to `null`, there's no upper limit.
`className`	`string`	A custom CSS class name that will be applied to the root element of the component.
`style`	`React.CSSProperties`	Inline styles that will be applied to the root element of the component.
`inputWrapperStyle`	`React.CSSProperties`	Inline styles that will be applied to each input wrapper element.
`addButtonLabel`	`React.ReactNode` \| `null`	The label for the "Add More" button. Default is `"Add More"`.
`customAddButton`	`React.ReactElement<any, any>` \| `null`	A custom React element to render as the "Add More" button. If provided, this will replace the default button.

Example

import React, { useState } from "react";
import DynamicInputs from "react-dynamic-inputs";

const App = () => {
    const [inputValues, setInputValues] = useState([]);

    const handleValuesChange = (values) => {
        setInputValues(values);
    };

    return (
        <div>
            <h1>Dynamic Inputs Example</h1>

            <DynamicInputs
                onChange={handleValuesChange}
                defaultItems={3}
                minItems={1}
                maxItems={5}
                addButtonLabel="Add More Fields"
                className="my-custom-class"
            />

            <div>
                <h2>Current Input Values:</h2>
                <pre>{JSON.stringify(inputValues, null, 2)}</pre>
            </div>
        </div>
    );
};

export default App;

Key Notes:

onChange: This will update the parent component with the current values whenever any input field is updated.
defaultItems: You can specify how many input fields should be present when the component is first rendered.
minItems & maxItems: These properties ensure that the number of inputs stays within the allowed limits.
customAddButton: If you want to replace the default "Add More" button, pass in your custom button as a React element.

Custom Rendering

You can also pass a custom render function as the children prop, which allows you to have full control over how each input and remove button are rendered.

Example of using children:

import React, { useState } from "react";
import DynamicInputs from "react-dynamic-inputs";

const App = () => {
    const [inputValues, setInputValues] = useState([]);

    const handleValuesChange = (values) => {
        setInputValues(values);
    };

    return (
        <div>
            <h1>Dynamic Input Example</h1>

            <DynamicInputs
                onChange={handleValuesChange}
                defaultItems={2}
                minItems={1}
                maxItems={5}
            >
                {(inputProps, removeButtonProps) => (
                    <div className="custom-input-wrapper">
                        <input {...inputProps} className="custom-input" />
                        <button
                            {...removeButtonProps}
                            className="custom-remove-button"
                        >
                            Remove
                        </button>
                    </div>
                )}
            </DynamicInputs>
        </div>
    );
};

export default App;

In this example, the children function receives inputProps (for the input element) and removeButtonProps (for the remove button), allowing you to customize their appearance and behavior.

Example

There is also a useable Example in example folder. Feel free to check it out!

Package detail