https://github.com/misantronic/react-slct

Yet another Select-Box based on react and styled-components
https://github.com/misantronic/react-slct

combobox multi-select react react-virtualized select-box styled-components typescript

Last synced: 2 months ago
JSON representation

Yet another Select-Box based on react and styled-components

• Host: GitHub
• URL: https://github.com/misantronic/react-slct
• Owner: misantronic
• License: mit
• Created: 2018-06-26T11:30:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-12T11:01:35.000Z (about 1 year ago)
• Last Synced: 2024-10-30T07:00:09.777Z (2 months ago)
• Topics: combobox, multi-select, react, react-virtualized, select-box, styled-components, typescript
• Language: TypeScript
• Size: 10.7 MB
• Stars: 15
• Watchers: 0
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-slct 🐘 

[![npm version](https://badge.fury.io/js/react-slct.svg)](https://badge.fury.io/js/react-slct) [![dependencies](https://david-dm.org/misantronic/react-slct.svg)]() ![](http://img.badgesize.io/misantronic/react-slct/master/dist/react-slct.min.js) ![](http://img.badgesize.io/misantronic/react-slct/master/dist/react-slct.min.js?compression=gzip)

Yet another Select-Box based on react, styled-components and react-window.

## Install

```bash

npm i react-slct --save

```

```bash

yarn add react-slct

```

## Features

-   Single-select

-   Multi-select

-   Searchable

-   Clearable

-   Disabled (whole box or single options)

-   Creatable in single- and multi-select

-   Automatic menu-position (top or bottom)

-   Customizable components

-   Native support (e.g. on mobile devices)

-   Full keyboard-support inkl. TAB-behavior

-   Auto-select options in non-searchable box via keyboard-typing

-   Makes use of React Portals to render menu

-   100% typescript

-   Supports [headless](https://medium.com/merrickchristensen/headless-user-interface-components-565b0c0f2e18)-mode, to gain full control of what's being rendered.

## Examples 🃏

Check [here](https://rawgit.com/misantronic/react-slct/master/examples/dist/index.html) for examples.

Run examples locally using `yarn examples` or `npm run examples`.