rs-react-select

Select menu pluggin for project 14 : Pass a jQuery library to React

A simple react select menu

Npm libray link

1. Installation
2. Examples of use
3. Default option

Installation

You can install rs-react-select with npm: npm i rs-react-select

For import rs-react-select: import {Select} from "rs-react-select"

Examples of use

Example 1: by default

<Select
    options = {states}
/>

Example 2: with title and placeholder

    <Select
        options = {states}
        placeholder = "State choice"
        title = "State"
    />

Example 3: customized

const customSelectMenu = {
    background: "#CECECE",
    borderRadius: "5px",
    border: "none"
}
    
const customList = {
    border: "none"
}

<Select
    options = {states}
    styleList = {customList}
    styleSelectMenu = {customSelectMenu}
/>

Default option

Default content

Select.defaultProps = {
    down: Down, //To change the default down image
    hoverBackground: "#CECECE", //To customize the hover option background style
    options: ["Option 1", "Option 2", "Option 3"], //Options to display
    placeholder: "", //If no value then option 1 by default
    styleContainer: {}, //To customize the container style which contains all the select menu 
    styleImg: {}, //To customize the img style
    styleList: {}, //To customize the list of options style
    styleOption: {}, //To customize the option style
    styleOptionSelected: {}, //To customize the option selected style
    styleSelectMenu: {}, //To customize the select menu style
    styleTitle: {}, //To customize the title style
    title: "", //To change the title content
    up: Up //To change the default up image
}

Default type

Select.propTypes = {
    down: PropTypes.string,
    hoverBackground: PropTypes.string,
    options: PropTypes.array,
    placeholder: PropTypes.string,
    styleContainer: PropTypes.object,
    styleImg: PropTypes.object,
    styleList: PropTypes.object,
    styleOption: PropTypes.object,
    styleOptionSelected: PropTypes.object,
    styleSelectMenu: PropTypes.object,
    styleTitle: PropTypes.object,
    title: PropTypes.string,
    up: PropTypes.string,
}