diff --git a/README.md b/README.md
index cbed0cfb68..7aaeac974e 100644
--- 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 (
+
+ setEditorState(editorState)}
+ />
+
+ );
+}
+
+```
+
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 `` `` block of your HTML file:
diff --git a/docs/Overview.md b/docs/Overview.md
index c0891351b7..52f288cfa3 100644
--- 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 (
+ setEditorState(editorState)}
+ />
+ );
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById('container')
+);
+```
+
Because Draft.js supports unicode, you must have the following meta tag in the `` block of your HTML file:
```html