diff --git a/docs/overview.md b/docs/overview.md index 244e0f81..a86d98b8 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -16,37 +16,72 @@ npm install --save megadraft To use it in your application all you need to do is import the Megadraft component such as the following: +# Class Component: + ```js import React from "react"; -import {createRoot} from "react-dom/client"; -import {MegadraftEditor, editorStateFromRaw} from "megadraft"; +import { createRoot } from "react-dom/client"; +import { MegadraftEditor, editorStateFromRaw } from "megadraft"; //Import megadraft.css -import 'megadraft/dist/css/megadraft.css' +import "megadraft/dist/css/megadraft.css"; class App extends React.Component { constructor(props) { super(props); - this.state = {editorState: editorStateFromRaw(null)}; + this.state = { editorState: editorStateFromRaw(null) }; } - onChange = (editorState) => { - this.setState({editorState}); - } + onChange = editorState => { + this.setState({ editorState }); + }; render() { return ( //Add some margin left to show plugins sidebar -
+
+ placeholder="Add some text" + />
- ) + ); } } const root = createRoot(document.getElementById("container")); root.render(); ``` + +# Functional Component: + +```js +import React, { useState } from "react"; +import { createRoot } from "react-dom/client"; +import { MegadraftEditor, editorStateFromRaw } from "megadraft"; + +// Import megadraft.css +import "megadraft/dist/css/megadraft.css"; + +const App = () => { + const [editorState, setEditorState] = useState(editorStateFromRaw(null)); + + const onChange = newEditorState => { + setEditorState(newEditorState); + }; + + return ( +
+ +
+ ); +}; + +const root = createRoot(document.getElementById("container")); +root.render(); +```