https://github.com/dannycalleri/react-light-select

Lightweight ReactJS selectbox component
https://github.com/dannycalleri/react-light-select

Last synced: 7 days ago
JSON representation

Lightweight ReactJS selectbox component

• Host: GitHub
• URL: https://github.com/dannycalleri/react-light-select
• Owner: dannycalleri
• Created: 2016-03-18T16:33:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T09:03:00.000Z (about 7 years ago)
• Last Synced: 2024-11-01T04:05:39.709Z (16 days ago)
• Language: JavaScript
• Homepage:
• Size: 13.9 MB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Light Select - [Demo](http://dannycalleri.github.io/react-light-select/)

[![npm](https://img.shields.io/npm/v/react-light-select.svg)](https://www.npmjs.com/package/react-light-select)

[View Demo](http://dannycalleri.github.io/react-light-select/)

**react-light-select** is a **lightweight ReactJS selectbox** component (**~3kb** minified) that lets you define your options and a callback for when the selection changes.

The elements list is your browser's default and works on **every browser and device**, it doesn't define a custom elements list.

## Install

Simply **run**

    npm install react-light-select --save

and **require it** with your favorite bundler (tested with **Browserify** and **Webpack**).

Don't forget to **include the provided CSS** (or write your own)

Example:

    var ReactLightSelect = require('react-light-select');

or if you're using **ES6**

    import ReactLightSelect from 'react-light-select';

**Include the CSS** in your HTML (change the path to your needs):

    

Then use it like this (JSX style, but you are free to use it in plain JS):

    

## Configuration

The most basic select must have **data** and **onSelectChange** props, for example:

    

    

Following there's a complete list of props you can pass to the component.

    

### Props   

### `data`

type: `array`

This is needed to populate the selectbox.

Example:

    const data = [

        {label:"Option A", value:"a"},

        {label:"Option B", value:"b"},

        {label:"Option C", value:"c"}

    ];

    

#### `onSelectChange`

type: `function`

This gets called when a the user selects a new option.

### `value`

type: `string`

Default value.

## Build

The component is written in **ES6** and **JSX**, so you need to compile it first.

Clone the project, run

    npm install

and then open up the test environment with the command

    gulp serve

This command will open a web page with live reload so you can develop and see the changes in realtime.

## Contribute

Contributions are welcome!

Fork the project and send a pull request when you're ready.