JSPM – react-inputs-library@1.0.4

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-inputs-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Inputs Library

A collection of customizable input components for React. This library provides a flexible set of input components that can be easily extended to suit your needs.

SandBox Link: React Inputs Library Sandbox

Features

Flexible and customizable input components
Easily extendable to support additional input types
Built-in validation and error handling
Supports React hooks and state management
Simple and easy to integrate with your existing forms

Installation and Usage

To get started, you can install react-inputs-library from npm:

yarn add react-inputs-library

Then, use it in your React app:

import React, { useState } from 'react';
import { TextInput, SelectInput } from 'react-inputs-library';

const MyForm = () => {
  const [text, setText] = useState('');
  const [selectedOption, setSelectedOption] = useState('');

  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];

  return (
    <form>
      <TextInput
        label="Text Input"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter something"
      />
      <SelectInput
        label="Select Fruit"
        options={options}
        value={selectedOption}
        onChange={(e) => setSelectedOption(e.target.value)}
      />
    </form>
  );
};

export default MyForm;

Props

Here's an example of a table that outlines the functionality and the expected behaviors for the TextInput component based on the props and logic in your component:

Feature	Description	Props Involved	Test Scenarios
Label rendering	Renders a label above the input field if the `label` prop is provided.	`label`	Test that the label is displayed correctly when the `label` prop is provided.
Controlled vs. Uncontrolled Value	If `value` is provided, the component is controlled; otherwise, it's uncontrolled with the `defaultValue` prop.	`value`, `defaultValue`, `onChange`	Test that the input reflects the `value` prop in a controlled component and the `defaultValue` prop in an uncontrolled component.
Helper Text	Displays helper text if `helperText` is provided. Can show error text if `error` prop is true.	`helperText`, `error`	Test that helper text appears and is styled correctly based on `helperText` and `error` props.
Password Visibility Toggle	Allows toggling password visibility when `type="password"`.	`type`, `isPasswordVisible`	Test that password visibility toggles between "text" and "password" when the eye icon is clicked.
Clear Button	Displays a clear button if `allowClear` is true and input value exists.	`allowClear`, `value`	Test that the clear button is rendered and clears the input value when clicked.
Max Length	Restricts input length if `maxLength` is provided.	`maxLength`	Test that the input doesn't accept more than the specified `maxLength`.
Disabled State	Disables the input field when `disabled` is true.	`disabled`	Test that the input is disabled when the `disabled` prop is set to true.
Enter Key Behavior	Triggers `onPressEnter` when the Enter key is pressed.	`onPressEnter`	Test that the `onPressEnter` callback is called when the Enter key is pressed.
Error State Styling	Applies an error class to input and helper text when `error` is true.	`error`	Test that the input and helper text have the correct error styling when the `error` prop is true.
Success State Styling	Applies a success class to the input when `success` is true (only if `error` is false).	`success`, `error`	Test that the input and helper text have the correct success styling when the `success` prop is true and `error` is false.
Custom Class Names	Allows custom styling via the `className` prop.	`className`	Test that custom class names are applied correctly.

Here's a table summarizing the SelectInput component:

Prop	Type	Default	Description
`label`	`string`	`-`	The label for the select input.
`className`	`string`	`""`	Additional custom class for the select input wrapper.
`name`	`string`	`-`	Name of the input field, used for form submissions.
`value`	`array`	`-`	The controlled value for the select input.
`defaultValue`	`array`	`[]`	The initial value when the input is uncontrolled.
`onChange`	`func`	`-`	Callback function when the value changes.
`disabled`	`bool`	`false`	Disables the select input when true.
`options`	`array` of `objects`	`[]`	An array of options for the select input, each with `value`, `label`, and optional `isFixed`, `isDisabled`, and `color` properties.
`helperText`	`string`	`-`	Text that appears below the select input (e.g., an error message or a helper text).
`allowClear`	`bool`	`false`	Whether the option to clear the selected value is available.
`placeholder`	`string`	`"Select an option"`	Placeholder text when no option is selected.
`multiple`	`bool`	`false`	Allows multiple values to be selected.
`error`	`bool`	`false`	Indicates an error state.
`success`	`bool`	`false`	Indicates a success state.
`menuPlacement`	`string`	`"auto"`	Determines whether the dropdown menu appears at the "top" or "bottom" based on the available space.

Here’s the props table for the Checkbox component:

Prop Name	Type	Default Value	Description
`label`	`string`	-	The label for the checkbox.
`className`	`string`	`""`	Optional additional class for customization.
`name`	`string`	-	The `name` attribute for the checkbox.
`checked`	`bool`	-	Controlled checkbox state (if set, makes it controlled).
`defaultChecked`	`bool`	`false`	Default checkbox state (uncontrolled mode).
`onChange`	`func`	-	Callback function triggered when the checkbox state changes.
`disabled`	`bool`	`false`	Whether the checkbox is disabled.
`onFocus`	`func`	-	Callback triggered when the checkbox is focused.
`onBlur`	`func`	-	Callback triggered when the checkbox loses focus.
`onMouseDown`	`func`	-	Callback triggered when the checkbox is clicked.
`indeterminate`	`bool`	`false`	Whether the checkbox is in an indeterminate state (partially selected).
`isSwitch`	`bool`	`false`	Whether the checkbox should have a switch-style appearance.
`error`	`bool`	`false`	Whether the checkbox has an error state.
`success`	`bool`	`false`	Whether the checkbox has a success state.

Here’s the props table for the Radio component:

Prop Name	Type	Default Value	Description
`label`	`string`	-	The label for the radio button.
`className`	`string`	`""`	Optional additional class for customization.
`name`	`string`	-	The `name` attribute for the radio button.
`value`	`string`	-	The `value` for the radio button.
`checked`	`bool`	-	Controlled radio state (if set, makes it controlled).
`defaultChecked`	`bool`	`false`	Default radio state (uncontrolled mode).
`onChange`	`func`	-	Callback function triggered when the radio state changes.
`disabled`	`bool`	`false`	Whether the radio button is disabled.
`switch`	`bool`	`false`	Whether the radio button should have a switch-style appearance.
`error`	`bool`	`false`	Whether the radio button has an error state.
`success`	`bool`	`false`	Whether the radio button has a success state.

Customization

React Inputs Library provides an extensible API to customize the inputs. You can:

Customize the styles using CSS or styled-components
Use custom components for form validation
Integrate with existing form libraries like Formik or React Hook Form

TypeScript

React Inputs Library is written in TypeScript and provides full type definitions. You can use it with TypeScript for better developer experience and type safety.

License

You can adjust the specifics like links and company name according to your needs!