doc update

Author: adumesny

README.md

@@ -33,14 +33,15 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Requirements](#requirements)
   - [API Documentation](#api-documentation)
   - [Extend Library](#extend-library)
-  - [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
   - [Change grid columns](#change-grid-columns)
   - [Custom columns CSS](#custom-columns-css)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [Touch devices support](#touch-devices-support)
-- [Migrating to v0.6](#migrating-to-v06)
-- [Migrating to v1](#migrating-to-v1)
-- [Migrating to v2](#migrating-to-v2)
+- [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
+- [Migrating](#migrating)
+  - [Migrating to v0.6](#migrating-to-v06)
+  - [Migrating to v1](#migrating-to-v1)
+  - [Migrating to v2](#migrating-to-v2)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -69,7 +70,7 @@ npm install --save gridstack
 ES6 or Typescript
 
 ```js
-import { GridStack } from 'gridstack';
+import GridStack from 'gridstack';
 import 'gridstack/dist/gridstack.min.css';
 ```
 
@@ -150,17 +151,6 @@ let grid = GridStack.init();
 grid.printCount();
 ```
 
-## gridstack.js for specific frameworks
-
-search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
-
-- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html) 
-- React: [react gridstack example](https://github.com/Inder2108/react-gridstack-example)
-- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
-- Angular9: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance. recommend for concept ONLY. Working on creating an Angular wrapper as that is we use ourself...
-- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
-- Rails: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
-
 ## Change grid columns
 
 GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
@@ -277,20 +267,31 @@ GridStack.init(options);
 
 If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
 
+# gridstack.js for specific frameworks
+
+search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
+
+- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html) 
+- React: [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/blob/master/src/App.js) or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
+- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
+- Angular9: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for concept ONLY. You can do component or directive. Working on exposing the Angular component wrapper we use internally.
+- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
+- Rails: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
 
-# Migrating to v0.6
+# Migrating
+## Migrating to v0.6
 
 starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/develop/doc#events) if you didn't and relied on the old broken behavior.
 
-# Migrating to v1
+## Migrating to v1
 
 v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
 
-1. see [Migrating to v0.6](#migrating-to-v06) if you didn't already
+0. see previous step if not on v0.6 already
 
-2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) below.
+1. your code only needs to `import GridStack from 'gridstack'` or include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) section.
 
-3. code change:
+2. code change:
 
 **OLD** initializing code + adding a widget + adding an event:
 ```js
@@ -321,7 +322,7 @@ grid.on('added', function(e, items) {/* items contains info */});
 // grid access after init
 var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
 ```
-Other changes
+Other rename changes
 
 ```js
 `GridStackUI` --> `GridStack`
@@ -333,11 +334,11 @@ Other changes
 
 Recommend looking at the [many samples](./demo) for more code examples.
 
-# Migrating to v2
+## Migrating to v2
 
 make sure to read v1 migration first!
 
-v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
+v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
 
 1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).
 

package.json

@@ -9,9 +9,10 @@
     "url": "git+https://github.com/gridstack/gridstack.js.git"
   },
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && yarn doc",
     "w": "rm -rf dist/* && grunt && webpack",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",
+    "doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
     "test": "yarn lint && karma start karma.conf.js",
     "lint": "tsc --noEmit && eslint src/*.ts",
     "reset": "rm -rf dist node_modules",