diff --git a/.babelrc b/.babelrc
index f8a7a65..bd18a93 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,11 @@
{
- "presets": ["react", "es2015", "stage-2"]
-}
\ No newline at end of file
+ "presets": ["react", "es2015", "stage-2"],
+ "env": {
+ "es": {
+ "comments": false
+ },
+ "commonjs": {
+ "comments": false
+ }
+ }
+}
diff --git a/.gitignore b/.gitignore
index 84805da..1aa1cf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,7 @@
node_modules
example/bundle.js
+dist
+lib
+es
+*.log
+.DS_Store
diff --git a/README.md b/README.md
index 7812099..16fe890 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
# Selectable items for React
+[![NPM version][npm-image]][npm-url]
+[![NPM downloads][npm-downloads-image]][npm-url]
Allows individual or group selection of items using the mouse.
@@ -7,14 +9,18 @@ Allows individual or group selection of items using the mouse.
## Upgrading from 0.1 to 0.2
There have been significant changes in the 0.2 release. Please [read about them here](UPGRADING.md).
+
## Getting started
+
```
-npm install react-selectable
+npm install --save react-selectable
```
+This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
+
+If you are not, you can access these files [through unpkg](https://unpkg.com/react-selectable), download them, or point your package manager to them. For more info on this in, visit [the builds section](#builds)
```js
import React from 'react';
-import { render } from 'react-dom';
import { SelectableGroup, createSelectable } from 'react-selectable';
import SomeComponent from './some-component';
@@ -22,18 +28,19 @@ const SelectableComponent = createSelectable(SomeComponent);
class App extends React.Component {
- constructor (props) {
- super(props);
- this.state = {
- selectedKeys: []
- };
+ state = {
+ selectedKeys: []
+ }
+
+ handleSelection = (selectedKeys) => {
+ this.setState({ selectedKeys });
}
render () {
return (
{this.props.items.map((item, i) => {
- let selected = this.state.selectedKeys.indexOf(item.id) > -1;
+ const selected = this.state.selectedKeys.indexOf(item.id) > -1;
return (
{item.title}
@@ -42,14 +49,10 @@ class App extends React.Component {
})}
);
- },
-
- handleSelection (selectedKeys) {
- this.setState({ selectedKeys });
}
-
}
```
+
## Configuration
The `` component accepts a few optional props:
@@ -61,3 +64,15 @@ The `` component accepts a few optional props:
* `selectOnMouseMove` (Boolean) Enable to fire the `onSelection` callback while the mouse is moving. Throttled to 50ms for performance in IE/Edge
* `preventDefault` (Boolean) Allows to enable/disable preventing the default action of the onmousedown event (with e.preventDefault). True by default. Disable if your app needs to capture this event for other functionalities.
* `enabled` (Boolean) If false, all of the selectable features are disabled, and event handlers removed.
+
+## Builds
+
+Most commonly people consume `react-selectable` as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules. These modules are what you get when you import `react-selectable` in a [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/), or a Node environment.
+
+The `redux-selectable` source code is written in ES2015 but we precompile both CommonJS and UMD builds to ES5 so they work in [any modern browser](http://caniuse.com/#feat=es5).
+
+If you don't use a module bundler, it's also fine. The `redux-selectable` npm package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/react-selectable/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a [`