Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Adding Hooks in docs #2004

Closed
wants to merge 4 commits into from
Closed

Adding Hooks in docs #2004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9955078
Adding Hooks in docs
charliewilco Feb 17, 2019
c614635
correct ref
charliewilco Apr 2, 2019
3c52e18
Merge branch 'master' of git://github.com/facebook/draft-js
charliewilco Apr 2, 2019
4a45d35
nits ✍️
charliewilco Apr 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
26 changes: 26 additions & 0 deletions docs/Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down