React Select Light

A highly composable & reusable select components for react projects

• React Select Light
  • Features
  • Installation & Usage
    • Prerequisites
    • Installation
  • Hints for contributing
    • Built With
    • Dev Dependencies
    • Development
    • Commands
  • License

Features

This package setup will include following features.

• Single-select
• Multi-select
• Searchable
• Clearable
• Disabled (whole box or single options)
• Creatable in single- and multi-select
• 100% typescript

Installation & Usage

Prerequisites

• node >=18.4.0
• npm >=9.x.x

Installation

To start using React Select Light, install it to your project as a dependency via

npm install react-select-light
yarn add react-select-light

then import it and add your tree structure with

import { Select } from 'react-select-light';

<Select
  options={options}
  displayValue='label'
  isMulti
  isObject
/>;

More details at the Get-Started Guide.

Hints for contributing

Built With

Dev Dependencies

| Package | Description | | ---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Typescript | TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. | | tsup | The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules. Supports TypeScript, Code Splitting, PostCSS, and more out of the box. | | Vitest | A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX. | | Storybook | Storybook is a frontend workshop for building UI components and pages in isolation. | | Husky | Git hook management | | Conventional Commit | A specification for adding human and machine readable meaning to commit messages. | | Commitlint | Lint commit messages | | Commitizen | Using a standardized set of rules to write commits, makes commits easier to read, and enforces writing descriptive commits. | | Lint Staged | Run linters against staged git files and don't let 💩 slip into your code base! | | ESLint | A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. | | Prettier | An opinionated code formatter |

Development

Fork the project

Access the project directory.

cd react-select-light

Install dependencies.

npm install

Serve with hot reload at http://localhost:6006.

npm run storybook

Commands

| Command | Description | | --------------------- | :---------------------------------------------- | | npm run dev | Starts the server in dev mode | | npm run lint | Runs ESLint on the project | | npm run lint-staged | Runs Prettier on only staged (changed) files | | npm run type-check | Runs TSC | | npm run build | Runs build production bundle to 'dist' directly |

License

This project uses MIT license: License