From d52cc33eab3682e8a8765764d1238254e296aadb Mon Sep 17 00:00:00 2001
From: Marcus Pontes <marcusporama@gmail.com>
Date: Wed, 30 Oct 2024 11:02:08 -0300
Subject: [PATCH] feat: included overview for functional component (#442)

---
 docs/overview.md | 55 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 10 deletions(-)

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
-      <div style={{marginLeft: 80}}>
+      <div style={{ marginLeft: 80 }}>
         <MegadraftEditor
           editorState={this.state.editorState}
           onChange={this.onChange}
-          placeholder='Add some text'/>
+          placeholder="Add some text"
+        />
       </div>
-    )
+    );
   }
 }
 
 const root = createRoot(document.getElementById("container"));
 root.render(<App />);
 ```
+
+# 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 (
+    <div style={{ marginLeft: 80 }}>
+      <MegadraftEditor
+        editorState={editorState}
+        onChange={onChange}
+        placeholder="Add some text"
+      />
+    </div>
+  );
+};
+
+const root = createRoot(document.getElementById("container"));
+root.render(<App />);
+```