react-dynamic-inputs
Version:
Lightweight component for creating dynamic inputs
120 lines (92 loc) • 8.9 kB
Markdown
# 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](https://modasser.is-a.dev/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
```jsx
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`:
```jsx
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!