Add/Remove Input Fields Dynamically

The "addremove-input-fields-dynamically" npm package provides a simple and efficient solution for dynamically adding and removing input fields in web applications.Developers can integrate this package into their projects to enable users to add new input fields dynamically with a click of a button, as well as remove existing input fields as needed.

Demo

DEMO

Installation

Install my-project with npm

npm i addremove-input-fields-dynamically

Usage/Examples DynamicInput

import { DynamicInput } from "addremove-input-fields-dynamically";
import { useState } from "react";
import "addremove-input-fields-dynamically/dist/index.css";
import cancelIconSvg from "addremove-input-fields-dynamically/dist/icons/cancel.svg";
import addIconSvg from "addremove-input-fields-dynamically/dist/icons/add.svg";

function App() {
  const [inputOptions, setInputOptions] = useState([]);
  return (
    <DynamicInput
      inputOptions={inputOptions}
      setInputOptions={setInputOptions}
      cancelIcon={cancelIconSvg}
      buttonIconBefore={addIconSvg}
    />
  );
}

export default App;

Usage/Examples DynamicDoubleInput

import { DynamicDoubleInput } from "addremove-input-fields-dynamically";
import { useState } from "react";
import "addremove-input-fields-dynamically/dist/index.css";
import cancelIconSvg from "addremove-input-fields-dynamically/dist/icons/cancel.svg";
import addIconSvg from "addremove-input-fields-dynamically/dist/icons/add.svg";

function App() {
  const [inputOptions, setInputOptions] = useState([
    { id: 1, value1: "", value2: "" },
  ]);
  return (
    <DynamicDoubleInput
      inputOptions={inputOptions}
      setInputOptions={setInputOptions}
      cancelIcon={cancelIconSvg}
      buttonIconBefore={addIconSvg}
    />
  );
}

export default App;

Package Customization

Property name	Type	Default	Description
inputOptions	variable	inputOptions	pass useState variable
setInputOptions	function	setInputOptions	pass useState state update function
inputAttributes	object	empty object	input attributes with key pair value. example {readonly:"readonly"}
inputAttributesTwo	object	empty object	(for input two) input attributes with key pair value. example {readonly:"readonly"}
buttonAttributes	object	empty object	input attributes with key pair value. example {diabaled:"disabled"}
length	number	0	how many options can added
containerClassName	string	null	add your own css
itemClassName	string	null	add your own css
inputClassName	string	null	add your own css
cancelClassName	string	null	add your own css
buttonClassName	string	null	add your own css
buttonErrorClassName	string	null	add your own css
buttonText	string	add	add your own button text
cancelIcon	image file	svg	add your own icon
buttonIconBefore	image file	svg	add your own icon
buttonIconAfter	image file	svg	add your own icon

Hi, I'm Rayan Hossain! 👋

🚀 About Me

Passionate MERN Stack Developer || Building Innovative Web Solutions with MongoDB || Express JS || React JS || Next JS || Node.js || Mentor

🔗 Links

License

This software is free to use under the MIT license. See the LICENSE file for license text and copyright information.