react-dynamic-input

Create Multiple Inputs!

react-dynamic-input allows you to create multiple inputs that each have their own unique state that you define. It also comes with a built in onSubmit button which takes a function that you ceate. Add it to a form or whatever user input you need!

Installation & Usage

• npm i react-dynamic-input

• Add DynamicInput to your components like this:

import DynamicInput from "react-dynamic-input"

class YourComponent extends React.Component {
  render() {
    return <DynamicInput />
  }
}

props for the <DynamicInput/>:

Name	Required	Default	Type	Description
inputName	yes		string	The key you would like to be assigned to the state of each of the inputs that are created [{ [inputName]: ""}]
addButtonText	no	"Add Input"	string	The text you would like to appear on the button to create another input
setInput	yes		Function	The setState function you would like to be executed when a user types into the input (setState, or useState)
input	yes	[]	Array	The state you will pass to the component. Must be the shape of [{ [inputName]: ""}]
onSubmit	no		Function	The onSubmit function you would like to execute when a user submits the form. If nothing is provided there will be no button and you can add your own.
submitButtonText	no	"Submit"	string	The text you would like to appear on the submit button
addPosition	no	"top"	string	The position you would like the "Add Input" button to be. "top" will make it above the inputs, "bottom" will place it below and next to the submit button
type	no	"text"	string	The type of input you would like to use
removeText	no	"Remove"	string	The text you would like to have in the remove input button
placeholderNumbered	no	false	boolean	If you would like the placeholder text to have a number after the text, set this to true
toolTip	no	false	boolean	You can have a tooltip pop up when you scroll your mouse over the add button
toolTipText	no		string	The text you would like to appear in the tooltip above the add button
label	no	""	string	If you would like a label for the inputs you can put the text here (will appear as an <h4></h4 element above the inputs)

Example

import React, { useState } from "react"
import DynamicInput from "react-dynamic-input"

const App = () => {
  const [input, setInput] = useState([{ name: "" }])

  const showState = () => {
    alert(input.map(item => item.name))
  }
  return (
    <div>
      <DynamicInput
        inputName="name"
        addButtonText="Add Another Input"
        setInput={setInput}
        input={input}
        onSubmit={showState}
        submitButtonText="Submit"
        addPosition="bottom"
        type="text"
        placeholderNumbered={true}
        toolTip={true}
        toolTipText="Add another input"
        label="My Input"
      />
      {input.map((item, index) => (
        <p key={(index + 1) * 2}>{item.name}</p>
      ))}
    </div>
  )
}

export default App

Styling

Each of the Elements in the react-dynamic-input Component can be targeted througn CSS with a className attribute (the entire component can be targeted with an id):

• Enitre Component:

#DynamicInput {
  /* Add whatever CSS you'd like! */
}

• Add Button:

.addButton {
  /* Add whatever CSS you'd like! */
}

• Remove Button:

.removeButton {
  /* Add whatever CSS you'd like! */
}

• Submit Button:

.submitButton {
  /* Add whatever CSS you'd like! */
}

• Input:

.dynamicInput {
  /* Add whatever CSS you'd like! */
}

• Label:

.dynamicLabel {
  /* Add whatever CSS you'd like! */
}

• Tool Tip:

.dynamicTooltip {
  /* Add whatever CSS you'd like! */
}
.dynamicTooltipText {
  /* Add whatever CSS you'd like! */
}

Wish List:

• Basic Styling for inputs (Styled Components?)
• (Possible) Add a submit button for eact of the inputs individually to only submit one thing
• Tooltip for other buttons?

Contributing

I am open to ideas and improvments! If you have a feature or bug fix open a PR or submit an issue! Thank you! 🛰