Merge pull request #3 from rohan-deshpande/master

Made updates to README and bumped to `v2.0.0` as we now have a requirement for a React v16.0.0 peer dependency

Author: rohan-deshpande

CHANGELOG.md

@@ -1,117 +1,143 @@
-# Release Notes
+# Changelog
+
+## (2019-01-02) `v2.0.0`
+
+### Added
+
+- `DatFolder` now accepts a `closed` boolean prop to determine if the folder should be closed or open by default
+
+### Changed
+
+- React v16.0.0 is now required as a peer dependency
+- README updated with more docs, included a note about the React v16 peer dependency
+
+## (2017-12-09) `v1.0.3`
+
+### Added
+
+- Section on React version to README
+- Point regarding animations for `DatFolder` to Roadmap
+- License section to README
+
+## (2017-10-09) `v1.0.2`
+
+### Changed
+
+- Minor code formatting updates
+- Installation guidelines
 
 ## (2017-10-09) `v1.0.1`
 
 ### Changed
 
-* ES7 property initializers are now used to set initial state in all components rather than `componentWillMount`
+- ES7 property initializers are now used to set initial state in all components rather than `componentWillMount`
 
 ## (2017-10-09) `v1.0.0`
 
 ### Added
 
-* A lot of documentation to the README
-* Deploy script to `./example` app which deploys to github pages
+- A lot of documentation to the README
+- Deploy script to `./example` app which deploys to github pages
 
 ### Changed
 
-* Changed default export from `Dat` to `DatGui`
+- Changed default export from `Dat` to `DatGui`
 
 ## (2017-10-08) `v0.0.21`
 
 ### Changed
 
-* Removed custom check box styling from `DatBoolean` component
-* Ensured sliders are the same height as number inputs
-* Minor style changes for consistency
+- Removed custom check box styling from `DatBoolean` component
+- Ensured sliders are the same height as number inputs
+- Minor style changes for consistency
 
 ## (2017-10-08) `v0.0.20`
 
-### Changed  
+### Changed
 
-* Housekeeping in preparation for `v1.0.0`
+- Housekeeping in preparation for `v1.0.0`
 
 ## (2017-10-06) `v0.0.19`
 
 ### Added
 
-* `DatPresets` component - this allows you to set presets for your DatGUI component and switch between them easily
+- `DatPresets` component - this allows you to set presets for your DatGUI component and switch between them easily
 
 ### Changed
 
-* Removed final reference to `reactcss`, this can be completely removed from dependencies now
-* Removed unnecessary arrow functions in some `setState` callbacks
-* Fixed bug where `DatNumber` input updates weren't updating sliders
+- Removed final reference to `reactcss`, this can be completely removed from dependencies now
+- Removed unnecessary arrow functions in some `setState` callbacks
+- Fixed bug where `DatNumber` input updates weren't updating sliders
 
 ## (2017-10-05) `v0.0.18`
 
-### Added  
+### Added
 
-* `DatColor` component - this allows color pickers, powered by `react-color` to be rendered for mutating colors
-* Added `example:promote` script for pushing development code up from `example/src/dev` into `src`
+- `DatColor` component - this allows color pickers, powered by `react-color` to be rendered for mutating colors
+- Added `example:promote` script for pushing development code up from `example/src/dev` into `src`
 
 ### Changed
 
-* Example updated with `DatColor` included
+- Example updated with `DatColor` included
 
 ## (2017-10-04) `v0.0.17`
 
 ### Added
 
-* `DatSelect` component
+- `DatSelect` component
 
 ### Changed
 
-* Example updated with `DatSelect` included
+- Example updated with `DatSelect` included
 
 ## (2017-10-03) `v0.0.16`
 
 ### Added
 
-* Support for nested folders via `DatFolder`
+- Support for nested folders via `DatFolder`
 
-### Changed  
+### Changed
 
-* Example `App.js` has been updated to include a nested folder example
+- Example `App.js` has been updated to include a nested folder example
 
 ## (2017-10-02) `v0.0.15`
 
 ### Changed
 
-* SCSS is now broken up into partials which align with the various components
+- SCSS is now broken up into partials which align with the various components
 
 ### Added
 
-* Added `DatFolder` component
-* Added this to the example
+- Added `DatFolder` component
+- Added this to the example
 
 ## (2017-10-02) `v0.0.14`
 
 ### Changed
 
-* Updated component files to use `.js` file extension rather than `.jsx`
-* Removed `examples` directory and created single `example` directory which is now powered by `create-react-app`
-* Rewrote `webpack.config.js` so that it is compatible with Webpack v2
-* Updated a bunch of dependencies in `package.json`
-* Separated out `Slider` component from `DatNumber` and also added `utils` file
-* Switched all event handlers in components to ES7 syntax
-* Some code formatting
-* Changed `build` directory to `dist`
+- Updated component files to use `.js` file extension rather than `.jsx`
+- Removed `examples` directory and created single `example` directory which is now powered by `create-react-app`
+- Rewrote `webpack.config.js` so that it is compatible with Webpack v2
+- Updated a bunch of dependencies in `package.json`
+- Separated out `Slider` component from `DatNumber` and also added `utils` file
+- Switched all event handlers in components to ES7 syntax
+- Some code formatting
+- Changed `build` directory to `dist`
 
 ### Added
 
-* `example` directory
-* `src/components/Slider.js`
-* `src/components/utils.js`
-* `src/style` directory
-* `.editorconfig` file
-* `.eslintrc.json` file
-* `.babelrc` file
-* `scripts` directory
-* A number of `npm` scripts to `package.json`
-* This change log!
+- `example` directory
+- `src/components/Slider.js`
+- `src/components/utils.js`
+- `src/style` directory
+- `.editorconfig` file
+- `.eslintrc.json` file
+- `.babelrc` file
+- `scripts` directory
+- A number of `npm` scripts to `package.json`
+- This change log!
 
 ### Removed
 
-* The build no longer creates minified files, can add these back if required but I think it's better for the user to perform this step in their own build pipeline
-* ES5 examples, don't think many people are coding with React and ES5 nowadays
+- The build no longer creates minified files, can add these back if required but I think it's better for the user to perform this step in their own build pipeline
+- ES5 examples, don't think many people are coding with React and ES5 nowadays

README.md

@@ -8,6 +8,7 @@ For those that haven't used or seen dat.GUI before, it's basically a GUI for upd
 
 - [Demo](#demo)
 - [Installation](#installation)
+  * [React Version](#react-version)
 - [Usage](#usage)
 - [Docs](#docs)
   * [`DatGui`](#datgui)
@@ -36,6 +37,7 @@ For those that haven't used or seen dat.GUI before, it's basically a GUI for upd
     + [`toc`](#toc)
 - [What's missing](#whats-missing)
 - [Roadmap](#roadmap)
+- [License](#license)
 
 ## Demo
 
@@ -49,6 +51,10 @@ The demo is a deployed version of the latest production build of `./example`. Th
 npm install react-dat-gui --save
 ```
 
+### React Version
+
+React dat.GUI uses React and React-DOM `^16.0.0` aka React Fiber. It's recommended that you update your app's React version to align with this in order to avoid any issues.
+
 ## Usage
 
 First you'll need a wrapper component which will handle the updates from your dat.GUI, this component should pass the data for the GUI to control as well as an `onUpdate` function to the `DatGui` container component as props. Here's how you might do that:
@@ -69,13 +75,13 @@ class App extends Component {
     }
   }
 
-  update = data => this.setState({ data })
+  handleUpdate = data => this.setState({ data })
 
   render() {
     const { data } = this.state;
 
     return (
-      <DatGui data={data} onUpdate={this.update}>
+      <DatGui data={data} onUpdate={this.handleUpdate}>
         <DatString path='package' label='Package' />
         <DatNumber path='power' label='Power' min={9000} max={9999} step={1} />
         <DatBoolean path='isAwesome' label='Awesome?' />
@@ -97,16 +103,16 @@ This is the main container component for your GUI and is the default export from
 
 ##### required
 
-* `data` - The data your dat.GUI controller will mutate
-* `onUpdate` - The method which will be called whenever an update is handled by the controller
-* `children` - The dat.GUI components that make up the controller
+* `data: object` - The data your dat.GUI controller will mutate
+* `onUpdate: func` - The method which will be called whenever an update is handled by the controller
+* `children: array` - The dat.GUI components that make up the controller
 
 ##### optional
 
-* `liveUpdate` - Determines if live updates should occur, defaults to `true`
-* `labelWidth` - The width of the labels in pixels, defaults to `40`
-* `className` - The class name to set on the `DatGui` div
-* `style` - The style object to set on the `DatGui` div
+* `liveUpdate: bool` - Determines if live updates should occur, defaults to `true`
+* `labelWidth: number` - The width of the labels in pixels, defaults to `40`
+* `className: string` - The class name to set on the `DatGui` div
+* `style: object` - The style object to set on the `DatGui` div
 
 ### Components
 
@@ -258,6 +264,12 @@ For the first, I think the fact that this is now an NPM module sort of goes agai
 Local storage however is in the roadmap and will probably be done very soon.
 
 ## Roadmap
+
 * Loading and storing both default and preset data via `localStorage`
-* Time travel with undo/redo buttons (edited)
+* Animations for `DatFolder` expanding/collapsing
+* Time travel with undo/redo buttons
 * Better support for floating point `DatNumber`s (rounding etc.)
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dat-gui",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "dat.GUI reimagined for React",
   "main": "build/react-dat-gui.js",
   "style": "build/react-dat-gui.css",