https://github.com/theprojectsx/react-dynamic-inputs
Lightweight component for creating dynamic inputs
https://github.com/theprojectsx/react-dynamic-inputs
component next react tailwind
Last synced: 4 months ago
JSON representation
Lightweight component for creating dynamic inputs
- Host: GitHub
- URL: https://github.com/theprojectsx/react-dynamic-inputs
- Owner: TheProjectsX
- Created: 2025-05-21T09:42:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-21T11:40:59.000Z (about 1 year ago)
- Last Synced: 2025-06-29T10:44:24.583Z (12 months ago)
- Topics: component, next, react, tailwind
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-dynamic-inputs
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## 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) => void; defaultValue: string }, removeButtonProps: { handleOnClick: (e: React.MouseEvent) => 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` \| `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 (
Dynamic Inputs Example
Current Input Values:
{JSON.stringify(inputValues, null, 2)}
);
};
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 (
Dynamic Input Example
{(inputProps, removeButtonProps) => (
Remove
)}
);
};
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!