JSPM

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 are some common props you can pass to the input components:

• label - The label displayed for the input
• value - The current value of the input
• onChange - Callback function that is called when the value changes
• placeholder - The placeholder text for the input
• disabled - Disable the input
• error - Display an error message
• options - For SelectInput, the available options
• type - Specify the type of input (e.g., text, number, email)

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

MIT Licensed. Copyright (c) Your Company 2025.

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