A simple, reusable, custom form selector component for use in React Projects
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Redux Custom Select Header

React Custom Select

React custom select gives you a simple boiler plate for fully customizable select/option groups without having to battle with native styles. Because it's a react component you can easily integrate it with an existing react project and pass in the options via the props.

Installation:

npm install react-custom-select

Usage & Installation:

  • Install react-custom-select
  • Include CustomSelect, set your options & callback and use.
  • Done!

Example Usage:

/* Array of your selectOptions */
const selectOptions = [
  {text: 'one', value: 1},
  {text: 'two', value: 2},
  {text: 'three', value:3},
  {text: 'three', value:4, default: true}
];

/*
  static propTypes = {
    options: React.PropTypes.array.required,
    onSelect: React.PropTypes.func
  };
*/

<CustomSelect
  options={selectOptions}
  />

<CustomSelect
  options={selectOptions}
  selectorShown
  />
Defining your default option (optional)
  • By passing {default: true} you set that option to be the default selected
Defining your callback: (optional)
  • This allows you to send a callback to when the value is changed.
Defining visibility
  • By passing selectorShown to the component you set the default visibility (of the selector block) to visible.
<CustomSelect
  options={selectOptions}
  onSelect={(value) => this.updateForm(value)}
  />

Coming soon:

  • Placeholders

Contributing

Everyone brings something to the party so please contribute. If you have any suggestions give me a shout on twitter

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Credits

Created and maintained by @rorykermack

License

WTFPL (100% Open Source)