JSPM – react-inputs-library@1.0.1

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.

See react-inputs-library.com for live demos and comprehensive docs.

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)

For more detailed documentation, see the props documentation.

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

For more information on customization, check out the Customization Documentation.

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.

Thanks

A big thank you to all contributors who have helped make this project possible. Special thanks to the amazing community for their continuous support and contributions.

If you love this library, you can follow us on Twitter!

react-inputs-library