Adding Hooks in docs (#2004)

Summary: Adds React Hooks as examples in docs #1987 Pull Request resolved: #2004 Reviewed By: claudiopro Differential Revision: D14783281 Pulled By: claudiopro fbshipit-source-id: 7edcdb3ee4e32afd1197ea69fed968538243eccd
facebookarchive · Apr 11, 2019 · f9f5fd6 · f9f5fd6
1 parent dc58df8
commit f9f5fd6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,38 @@ ReactDOM.render(
 );
 ```
 
+Since the release of React 16.8, use can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
+
+
+```js
+function MyEditor() {
+  const [editorState, setEditorState] = React.useState(
+    EditorState.createEmpty()
+  );
+
+  const editor = React.useRef(null);
+
+  function focusEditor() {
+    editor.current.focus();
+  }
+
+  React.useEffect(() => {
+    focusEditor()
+  }, []);
+
+  return (
+    <div onClick={focusEditor}>
+      <Editor
+        ref={editor}
+        editorState={editorState}
+        onChange={editorState => setEditorState(editorState)}
+      />
+    </div>
+  );
+}
+
+```
+
 Note that the editor itself is only as tall as its contents. In order to give users a visual cue, we recommend setting a border and a minimum height via the `.DraftEditor-root` CSS selector, or using a wrapper div like in the above example.
 
 Because Draft.js supports unicode, you must have the following meta tag in the `<head>` `</head>` block of your HTML file:

diff --git a/docs/Overview.md b/docs/Overview.md
@@ -66,6 +66,32 @@ ReactDOM.render(
 );
 ```
 
+Since the release of React 16.8, use can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Editor, EditorState} from 'draft-js';
+
+function MyEditor() {
+  const [editorState, setEditorState] = React.useState(
+    EditorState.createEmpty()
+  );
+
+  return (
+    <Editor
+      editorState={editorState}
+      onChange={editorState => setEditorState(editorState)}
+    />
+  );
+}
+
+ReactDOM.render(
+  <MyEditor />,
+  document.getElementById('container')
+);
+```
+
 Because Draft.js supports unicode, you must have the following meta tag in the `<head></head>` block of your HTML file:
 
 ```html