input-component-react

1.0.5 • Public • Published

input-component-react

input-component-react simplifies the process of creating input JSX components for react-based applications. The components generated are CSS-friendly and are compatible with unit-testing using React Testing Library and JEST

Available Props

Props Definition Input Type
value Value of input component. Used to track stage changes, and error handling String
label Label of input component String
name Name of input component. Used to track stage changes, and error handling String
placeholder Placeholder of input component String
type Type of input component required (example: button, checkbox, color, date, password, file, submit, etc) String
onChange The script to run on the change of input value Function
onBlur The script to run when the input value loses focus Function
onClick The script to run when the input component is clicked Function
isError If set to true, will display the error message Boolean
errorMessage The error message to be displayed below the input component String
dataTestId Used as a data-testId for unit testing purpose String

CSS Classes

className Type Feature
input-component-react Primary CSS class for an entire input component, consisting of label, input, and error div
input-component-react-label Primary CSS class for labels of the component
labelAndInputContainer Primary CSS class for input and error div. Flex properties can be applied here to create distinct UIs
{`input-component-react-label ${label}label Custom Custom CSS class for a particular label
{input-component-react-input ${label}input} Custom Custom CSS class for a particular input
{input-component-react-error ${label}error} Custom Custom CSS class for a particular error div

image

For Example, In the above screenshot, you can see 2 text inputs, and 1 color, number, file, date type inputs each The code required to render this form is:

        <InputComponentReact
          type="text"
          label="First Name"
        />
        <InputComponentReact
          type="text"
          label="Last Name"
        />
        <InputComponentReact
          type="number"
          label="Price"
        />
        <InputComponentReact
          type="color"
          label="Color"
        />
        <InputComponentReact
          type="date"
          label="Date"
        />
        <InputComponentReact
          type="file"
          label="Upload Documents"
        />

See how easy it is! Add the package to your application and feel the difference Visit the source code to know how to add functionalities to the form.

You can learn more about how to use the package by visiting this link https://github.com/sanchit0496/input-component-react

Package Sidebar

Install

npm i input-component-react

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

7.83 kB

Total Files

5

Last publish

Collaborators

  • sanchit496