All Projects → chenjiahan → relect

chenjiahan / relect

Licence: other
A Tiny React Single Select Component.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects
SCSS
7915 projects

Projects that are alternatives of or similar to relect

Tail.select
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
Stars: ✭ 235 (+571.43%)
Mutual labels:  select
use-downshift
use-downshift.now.sh
Stars: ✭ 38 (+8.57%)
Mutual labels:  select
ir-city-select
List of Iran provinces and cities to use in HTML forms. ( ~2.3KB gzipped )
Stars: ✭ 22 (-37.14%)
Mutual labels:  select
Ng Select
⭐ Native angular select component
Stars: ✭ 2,781 (+7845.71%)
Mutual labels:  select
tagselector
Dependency-free JS library that turns select fields in customizable tag clouds
Stars: ✭ 19 (-45.71%)
Mutual labels:  select
choc-autocomplete
🏇 Autocomplete Component Package for Chakra UI
Stars: ✭ 286 (+717.14%)
Mutual labels:  select
React Dropdown Select
Customisable dropdown select for react
Stars: ✭ 227 (+548.57%)
Mutual labels:  select
nova-select-plus
A Laravel Nova Select Field
Stars: ✭ 67 (+91.43%)
Mutual labels:  select
selectize-bootstrap4-theme
Selectize Theme for Bootstrap 4
Stars: ✭ 43 (+22.86%)
Mutual labels:  select
insect
🛠 Highly customisable, minimalistic input x select field for React.
Stars: ✭ 33 (-5.71%)
Mutual labels:  select
Teaset
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
Stars: ✭ 2,845 (+8028.57%)
Mutual labels:  select
vue-tags-component
Vue.js 2+ tags component
Stars: ✭ 27 (-22.86%)
Mutual labels:  select
react-inputs-validation
A react component for form inputs validation. Online demo examples
Stars: ✭ 48 (+37.14%)
Mutual labels:  select
Jquery Flexselect
💪☑️ A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.
Stars: ✭ 236 (+574.29%)
Mutual labels:  select
vue-drag-select
基于Vue的仿原生操作系统鼠标拖拽选择
Stars: ✭ 63 (+80%)
Mutual labels:  select
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+557.14%)
Mutual labels:  select
react-native-autocomplete-dropdown
Dropdown Item picker with search and autocomplete (typeahead) functionality for react native
Stars: ✭ 87 (+148.57%)
Mutual labels:  select
vue-bootstrap-select
A vue version of bootstrap select
Stars: ✭ 46 (+31.43%)
Mutual labels:  select
leaflet-area-select
Control to just select an area and provide bbox for it
Stars: ✭ 27 (-22.86%)
Mutual labels:  select
craft-select2
Filter / search a <select> using the popular Select2 fieldtype for Craft CMS
Stars: ✭ 18 (-48.57%)
Mutual labels:  select

Relect

A Tiny React Single Select Component.
Example

Install

npm i relect -S

Usage

import React  from 'react';
import Relect from 'relect';

// include styles
import 'relect/lib/relect.css';

const options = [
    { text: 'one', value: 1 },
    { text: 'two', value: 2 }
];

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { chosen : null }
    }
    
    onChange(index) {
        this.setState({ chosen : index });
    }

    render() {
        return (
            <Relect options={options}
                    chosen={this.state.chosen}
                    onChange={this.onChange.bind(this)}
            />
        )
    }
}

Props

Property Type Default Description
width number 240 width of select
height number 36 height of select
options array / options
chosen number / index of chosen option
tabIndex number -1 tab order
disabled bool false whether to disable select
autoBlur bool false auto blur after selection
placeholder string / placeholder text
optionHeight number 30 height of option
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].