react-dynamic-input v0.1.5

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

1. npm i react-dynamic-input

2. 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/>:

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! 🛰