docs: Update README for v2 (#157)

Author: Jungwoo-An

README.md

@@ -1,8 +1,10 @@
 <div align="center">
-  <img alt="Logo" src="static/react-editor-js.png" width="400px">
+  <img alt="Logo" src="static/react-editor-js.png" width="100%">
 </div>
 
-<div align="center">
+<br>
+
+<div>
 
 [![npm version](https://badge.fury.io/js/react-editor-js.svg)](https://badge.fury.io/js/react-editor-js)
 ![LICENSE](https://img.shields.io/npm/l/react-editor-js?color=blue)
@@ -13,7 +15,7 @@
 
 ## 🍞 DEMO
 
-- [CodeSandbox](https://codesandbox.io/embed/react-editor-js-23opz)
+- [CodeSandbox](https://codesandbox.io/s/github/Jungwoo-An/react-editor-js/tree/master/examples)
 
 ## 🍀 Supported Official Plugin
 
@@ -39,28 +41,24 @@
 ### Install via npm (or yarn)
 
 ```bash
-# editorjs and official plugins
-npm install --save-dev react-editor-js @editorjs/editorjs @editorjs/paragraph
+npm install --save react-editor-js @editorjs/editorjs @editorjs/paragraph ...other plugins
 ```
 
-### Usage
-
-```js
-import EditorJs from 'react-editor-js';
+```tsx
+import EditorJs from 'react-editor-js'
 
-<EditorJs data={data} />;
+<EditorJs defaultValue={blocks} />
 ```
 
 ## 📙 API
 
 Allow all options of [editor-js](https://github.com/codex-team/editor.js/blob/master/types/configs/editor-config.d.ts)
 
-| Name               | Type                                                                            | Description                                                        |
-| ------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
-| enableReInitialize | Boolean                                                                         | Change editor-js data when componentDidUpdate                      |
-| onChange           | (api: API, newData: OutputData) => void                                         | Fires when something changed in DOM                                |
-| onCompareBlocks    | (newBlocks?: OutputData['blocks'], oldBlocks?: OutputData['blocks']) => boolean | Use to avoid Infinite update when enableReInitialize used with onChange ([Recommended Library](https://github.com/FormidableLabs/react-fast-compare)) |
-| onReady            | (instance?: EditorJS) => void                                                   | Use to execute callback when editor-js instance has initialized    |
+| Name               | Type                                                                            | Description                                                                                                                                           |
+| ------------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaulltValue | OutputData                                                                         | Initial data when using editor js as [uncontrolled component](https://ko.reactjs.org/docs/uncontrolled-components.html). highly recommend it                                                                                                         |
+| value | OutputData                                                                         | data when using editor js as [controlled component](https://ko.reactjs.org/docs/forms.html#controlled-components). <br> ⚠️ Don't use it with onChange prop as much as possible. Infinite loops can occur.                                                                                                         |
+| onInitialize            | (editorJS?: EditorJS) => void                                                   | Call after editor-js is initialized                                                                                       |
 
 ## 🧐 FAQ
 
@@ -74,11 +72,11 @@ To add more Block Tools, simply add them to your repo and pass them as `tools`-p
 npm install --save-dev @editorjs/checklist
 ```
 
-```js
-import EditorJs from 'react-editor-js';
-import CheckList from '@editorjs/checklist';
+```tsx
+import EditorJs from 'react-editor-js'
+import CheckList from '@editorjs/checklist'
 
-<EditorJs data={data} tools={{ checkList: CheckList }} />;
+<EditorJs defaultValue={blocks} tools={{ checkList: CheckList }} />
 ```
 
 We recommend to create a `tools.js` file and export your tools as a constant. Here is an example using all of the default plugins:
@@ -118,49 +116,45 @@ export const EDITOR_JS_TOOLS = {
   checklist: CheckList,
   delimiter: Delimiter,
   inlineCode: InlineCode,
-  simpleImage: SimpleImage
+  simpleImage: SimpleImage,
 }
 ```
 
 ```tsx
-import EditorJs from 'react-editor-js';
+import EditorJs from 'react-editor-js'
 import { EDITOR_JS_TOOLS } from './tools'
-<EditorJs data={data} tools={EDITOR_JS_TOOLS} />;
-```
 
+<EditorJs defaultValue={blocks} tools={EDITOR_JS_TOOLS} />
+```
 
 You can read more about plugins/tools at [editor-js: Tools installation](https://editorjs.io/getting-started#tools-installation)
 
 ### How do I use custom element?
 
 It's simpleeeee
 
-```js
-render() {
-  return (
-    <EditorJs holder="custom">
-      <div id="custom" />
-    </EditorJs>
-  );
-}
+```tsx
+<EditorJs holder="custom">
+  <div id="custom" />
+</EditorJs>
 ```
 
 ### How to access editor-js instance?
 
 You can access using instanceRef
 
-```js
-async handleSave() {
-  const savedData = await this.editorInstance.save();
-}
+```tsx
+const editorJS = React.useRef(null)
 
-componentDidMount() {
-  this.editorInstance // access editor-js
-}
+const handleInitialize = React.useCallback((instance) => {
+  editorJS.current = instance
+}, [])
 
-render() {
-  return <EditorJs instanceRef={instance => this.editorInstance = instance} data={data} />
-}
+const handleSave = React.useCallback(() => {
+  const savedData = await editorJS.current.save();
+}, [])
+
+<EditorJs onInitialize={handleInitialize} defaultValue={blocks} />
 ```
 
 ### Haven't received data from server (when use Link)
@@ -170,17 +164,15 @@ You should set linkTool [config](https://github.com/editor-js/link#usage). 💪
 ```tsx
 import LinkTool from '@editorjs/link'
 
-render() {
-  <EditorJs
-    data={data}
-    tools={{
-      linkTool: {
-        class: LinkTool,
-        config: {
-          endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching
-        }
+<EditorJs
+  defaultValue={blocks}
+  tools={{
+    linkTool: {
+      class: LinkTool,
+      config: {
+        endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching
       }
-    }}
-  />
-}
+    }
+  }}
+/>
 ```