react-opium-select

0.5.0 • Public • Published

react-opium-select

Simple select dropdown with a better UI.

Demo

Live demo

Installation

npm i react-opium-select

Usage

Basic example

import React, { Component } from 'react';
import Select from 'react-opium-select';
import 'react-opium-select/style.css';

class App extends Component {
  handleChange(value) {
    console.log(`Selected value: ${value}`);
  }

  render() {
    const options = [
      { label: 'Amritsar', value: 'amritsar' },
      { label: 'Bathinda', value: 'bathinda' },
      { label: 'Chandigarh', value: 'chandigarh' },
      { label: 'Ludhiana', value: 'ludhiana' },
      { label: 'Jalandhar', value: 'jalandhar' }
    ];

    return (
      <div style={{ margin: '200px auto', maxWidth: '200px' }}>

        <Select
          options={options}
          onChange={this.handleChange} />

      </div>
    );
  }
}

export default App;

Configuration

Props Type Default value Description
options Array - Select options passed as an array of objects. e.g. [{ label: 'Chandigarh', value: 'chandigarh' }, ...]
selectedValue String null Selected option
settings Array - UI settings - style, placeholder, maxItems, animateOnSelect, forceDirection
onChange Function undefined onChange handler

Settings

Props Type Default value Description
style Array - CSS styling options - padding, background, textColor, radius, borderWidth, borderColor
placeholder String - Placeholder for select dropdown
maxItems Number null Scroll items after this number
animateOnSelect Boolean true Subtle animation on item select
forceDirection String null Force open to a specified direction - up or down

Style

Props Type Default value Description
padding String 10px 15px CSS padding
background String #f1f2f3 Background color - solid or gradient.
textColor String #3A3A3D Text color, also used to compute scrollbar and hover colors, must be hex code.
radius Number 0 Border radius
borderWidth# Number 0 Thikness of border
borderColor# String #5D5E5F Border color

# Applying border is currently an experimental feature.

/react-opium-select/

    Package Sidebar

    Install

    npm i react-opium-select

    Weekly Downloads

    6

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    592 kB

    Total Files

    6

    Last publish

    Collaborators

    • prasanjit