Skip to content

Commit c83f444

Browse files
gwyneplainegwyneplaine
committed
add readme to react-select workspace for npm
1 parent 37968f4 commit c83f444

File tree

2 files changed

+132
-4
lines changed

2 files changed

+132
-4
lines changed

‎README.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ The Select control for [React](https://reactjs.com). Initially built for use in
99

1010
See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
1111

12-
## Version 2 🎉
12+
React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
1313

14-
React Select v2.0.0 is a complete rewrite, funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
15-
16-
Improvements include:
14+
Features include:
1715

1816
* Flexible approach to data, with customisable functions
1917
* Extensible styling API with [emotion](https://emotion.sh)

‎packages/react-select/README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
[![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select)
2+
[![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=shield)](https://circleci.com/gh/JedWatson/react-select/tree/master)
3+
[![Coverage Status](https://coveralls.io/repos/JedWatson/react-select/badge.svg?branch=master&service=github)](https://coveralls.io/github/JedWatson/react-select?branch=master)
4+
[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)
5+
6+
# React-Select
7+
8+
The Select control for [React](https://reactjs.com). Initially built for use in [KeystoneJS](http://www.keystonejs.com).
9+
10+
See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
11+
12+
React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
13+
14+
Features include:
15+
16+
* Flexible approach to data, with customisable functions
17+
* Extensible styling API with [emotion](https://emotion.sh)
18+
* Component Injection API for complete control over the UI behaviour
19+
* Controllable state props and modular architecture
20+
* Long-requested features like option groups, portal support, animation, and more
21+
22+
If you're interested in the background, watch Jed's [talk on React Select](https://youtu.be/Eb2wy-HNGMo) at ReactNYC in March 2018.
23+
24+
See our [upgrade guide](https://react-select.com/upgrade-guide) for a breakdown on how to upgrade from v1 to v2.
25+
26+
The old docs and examples will continue to be available at [v1.react-select.com](https://v1.react-select.com).
27+
28+
# Installation and usage
29+
30+
The easiest way to use react-select is to install it from npm and build it into your app with Webpack.
31+
32+
```
33+
yarn add react-select
34+
```
35+
36+
Then use it in your app:
37+
38+
```js
39+
import React from 'react';
40+
import Select from 'react-select';
41+
42+
const options = [
43+
{ value: 'chocolate', label: 'Chocolate' },
44+
{ value: 'strawberry', label: 'Strawberry' },
45+
{ value: 'vanilla', label: 'Vanilla' }
46+
];
47+
48+
class App extends React.Component {
49+
state = {
50+
selectedOption: null,
51+
}
52+
handleChange = (selectedOption) => {
53+
this.setState({ selectedOption });
54+
console.log(`Option selected:`, selectedOption);
55+
}
56+
render() {
57+
const { selectedOption } = this.state;
58+
59+
return (
60+
<Select
61+
value={selectedOption}
62+
onChange={this.handleChange}
63+
options={options}
64+
/>
65+
);
66+
}
67+
}
68+
```
69+
70+
## Props
71+
72+
Common props you may want to specify include:
73+
74+
* `autoFocus` - focus the control when it mounts
75+
* `className` - apply a className to the control
76+
* `classNamePrefix` - apply classNames to inner elements with the given prefix
77+
* `isDisabled` - disable the control
78+
* `isMulti` - allow the user to select multiple values
79+
* `isSearchable` - allow the user to search for matching options
80+
* `name` - generate an HTML input with this name, containing the current value
81+
* `onChange` - subscribe to change events
82+
* `options` - specify the options the user can select from
83+
* `placeholder` - change the text displayed when no option is selected
84+
* `value` - control the current value
85+
86+
See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.
87+
88+
## Controllable Props
89+
90+
You can control the following props by providing values for them. If you don't, react-select will manage them for you.
91+
92+
* `value` / `onChange` - specify the current value of the control
93+
* `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
94+
* `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
95+
96+
If you don't provide these props, you can set the initial value of the state they control:
97+
98+
* `defaultValue` - set the initial value of the control
99+
* `defaultMenuIsOpen` - set the initial open value of the menu
100+
* `defaultInputValue` - set the initial value of the search input
101+
102+
## Methods
103+
104+
React-select exposes two public methods:
105+
106+
* `focus()` - focus the control programatically
107+
* `blur()` - blur the control programatically
108+
109+
## Customisation
110+
111+
Check the docs for more information on:
112+
113+
* [Customising the styles](https://www.react-select.com/styles)
114+
* [Using custom components](https://www.react-select.com/components)
115+
* [Using the built-in animated components](https://www.react-select.com/home#animated-components)
116+
* [Creating an async select](https://www.react-select.com/async)
117+
* [Allowing users to create new options](https://www.react-select.com/creatable)
118+
* [Advanced use-cases](https://www.react-select.com/advanced)
119+
120+
# Thanks
121+
122+
Thank you to everyone who has contributed to this project. It's been a wild ride.
123+
124+
If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)
125+
126+
Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the Atlassian Design System team ❤️
127+
128+
## License
129+
130+
MIT Licensed. Copyright (c) Jed Watson 2018.

0 commit comments

Comments
 (0)