draft-js-wysiwyg-es
v1.3.4
Published
A wysiwyg using DraftJS.
Downloads
2
Maintainers
Readme
It's a fork of draft-js-wysiwyg that is built using plain TS compiler instead of a bundling with webpack. It's done to make this package tree-shakable.
Installation
Draft-js-wysiwyg is available as an npm package. You can install it using:
npm install draft-js-wysiwyg
#or
yarn add draft-js-wysiwyg
Please note that draft-js-wysiwyg
depends on draft-js
, @material-ui/core
and @material-ui/lab
which must also be installed.
Usage
Here is a very basic example to get you started.
import React from 'react';
import ReactDOM from 'react-dom';
import {
EditorContainer,
Editor,
InlineToggleButton,
EditorToolbar,
ToggleButtonGroup,
} from 'draft-js-wysiwyg';
import { EditorState } from 'draft-js';
import {
FormatBold as FormatBoldIcon,
FormatItalic as FormatItalicIcon
} from '@material-ui/icons';
import 'draft-js/dist/Draft.css';
const App = () => {
const [editorState, setEditorState] = React.useState(
() => EditorState.createEmpty()
);
const editor = React.useRef(null);
React.useEffect(() => {
editor.current.focus();
}, []);
return (
<EditorContainer
editorState={editorState}
onChange={setEditorState}
>
<EditorToolbar>
<ToggleButtonGroup size="small">
<InlineToggleButton value="BOLD">
<FormatBoldIcon />
</InlineToggleButton>
<InlineToggleButton value="ITALIC">
<FormatItalicIcon />
</InlineToggleButton>
</ToggleButtonGroup>
</EditorToolbar>
<Editor ref={editor} placeholder="Enter some text.." />
</EditorContainer>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
You can see this live and interactive demo:
Examples
Are you looking for an example project to get started? We host some.
Documentation
Check out our documentation website.