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 |

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