From 1b3fde771e1e659fc22c0e35891adeeb72689f70 Mon Sep 17 00:00:00 2001
From: Imran khan <70023539+imran-khani@users.noreply.github.com>
Date: Sat, 17 Jun 2023 07:10:49 +0000
Subject: [PATCH] class comp to functional comp

---
 README.md | 71 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index feb3d20..1ccd2e1 100644
--- a/README.md
+++ b/README.md
@@ -27,29 +27,56 @@ npm install react-switch
 ## Usage
 
 ```javascript
-import React, { Component } from "react";
+import { useState } from "react";
 import Switch from "react-switch";
-
-class SwitchExample extends Component {
-  constructor() {
-    super();
-    this.state = { checked: false };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(checked) {
-    this.setState({ checked });
-  }
-
-  render() {
-    return (
-      <label>
-        <span>Switch with default style</span>
-        <Switch onChange={this.handleChange} checked={this.state.checked} />
-      </label>
-    );
-  }
-}
+import { FiSun, FiMoon } from "react-icons/fi";
+
+const App = () => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkTheme(!isDarkTheme);
+  };
+
+  const styles = {
+    lightTheme: {
+      backgroundColor: "#fff",
+      color: "#333",
+    },
+    darkTheme: {
+      backgroundColor: "#222",
+      color: "#fff",
+    },
+  };
+
+  return (
+    <div
+      className="App"
+      style={isDarkTheme ? styles.darkTheme : styles.lightTheme}
+    >
+      <header>
+        <h1>{isDarkTheme ? "Dark Theme" : "Light Theme"}</h1>
+      </header>
+      <main>
+        <p>This is a beautiful minimal theme toggle!</p>
+        <Switch
+          onChange={toggleTheme}
+          checked={isDarkTheme}
+          onColor="#86d3ff"
+          onHandleColor="#2693e6"
+          handleDiameter={20}
+          uncheckedIcon={<FiSun size={16} color="#fff" />}
+          checkedIcon={<FiMoon size={16} color="#fff" />}
+          height={24}
+          width={48}
+          className="switch"
+        />
+      </main>
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ### What's the deal with the label tag?