Customisable select dropdown for React
npm install react-custom-simpledropdownprops
npm install react-custom-simpledropdown --save
`
Or via yarn:
`
yarn add react-custom-simpledropdown
`
Quick Start
`jsx
import React from 'react';
import { Dropdown } from 'react-custom-simpledropdown';
export default class MyComponent extends React.Component {
render() {
return (
);
}
}
`
Outputs:
`html
placeholder value
-
Option 1
-
Option 2
-
Option 3
`
Usage
import:
`bash
import Dropdown from "react-custom-simpledropdown";
`
and use as:
`jsx
`
$3
You can get the returned value by listenting the event onSelectDropdownOption
Props
The component supports the following props. All props are optionals except the options prop.
$3
_options={array}_
The options prop is required so the component can render the dropdown list.
The options prop is an array of objects. Each object must have the following properties: name with the option name that you want to show on the dropdown list.
`
const states = [
{
"name": "option",
}
{
"name": "option",
}
{
"name": "option",
}
];
`
$3
_label={string}_
By default the component will not show a label but if you want you can set a label by adding the prop label
Set the label as "label"
`jsx
import React from 'react';
import { Dropdown } from 'react-custom-simpledropdown';
export default class MyComponent extends React.Component {
render() {
return (
);
}
}
`
$3
_placeholder={string}_
By default the component will not show any placeholder but if you want you can set it by adding the prop placeholder
Set the placeholder as "placeholder"
`jsx
import React from 'react';
import { Dropdown } from 'react-custom-simpledropdown';
export default class MyComponent extends React.Component {
render() {
return (
);
}
}
`
$3
_startvalue={string}_
By default the component doesn't have startvalue and the user have to select one so a value is returned but, if you want to set a default startValue from the options list you can add the prop startValue with a string that matches the name of the option you want to set as startValue.
Set the startValue as "option 3"
`jsx
import React from 'react';
import { Dropdown } from 'react-custom-simpledropdown';
export default class MyComponent extends React.Component {
render() {
return (
);
}
}
``