From 92168633133dbc0fe00f8f644a53dacd7eeedd23 Mon Sep 17 00:00:00 2001
From: artawood <artawood.gmail.com>
Date: Mon, 13 Jan 2020 01:01:03 +0700
Subject: [PATCH 1/5] added react hook usage to documentation for further
 clarity

---
 README.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e0d4960b..f42e1453 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@ yarn add react-semantic-ui-datepickers
 ## Usage
 
 ```jsx
-import React from 'react';
+import React, { useState } from 'react';
 import SemanticDatepicker from 'react-semantic-ui-datepickers';
 import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
 
@@ -56,6 +56,16 @@ const AppWithBasic = ({ onChange }) => (
 const AppWithRangeAndInPortuguese = ({ onChange }) => (
   <SemanticDatepicker locale="pt-BR" onChange={onChange} type="range" />
 );
+
+const WithReactHook = () => {
+  const [currentDate, setNewDate] = useState('');
+  return (
+    <div>
+      <SemanticDatepicker onChange={(event, date) => setNewDate(date.value)} />
+      <p>Date selected: {currentDate.toString()}</p>
+    </div>
+  );
+};
 ```
 
 More examples [here](https://react-semantic-ui-datepickers.now.sh).

From 53516fb3ec3edafb3627de059b7b8068e00511a6 Mon Sep 17 00:00:00 2001
From: artawood <artawood.gmail.com>
Date: Tue, 14 Jan 2020 11:54:09 +0700
Subject: [PATCH 2/5] modified examples for react hooks

---
 README.md | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index f42e1453..8baff621 100644
--- a/README.md
+++ b/README.md
@@ -49,21 +49,19 @@ import React, { useState } from 'react';
 import SemanticDatepicker from 'react-semantic-ui-datepickers';
 import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
 
-const AppWithBasic = ({ onChange }) => (
-  <SemanticDatepicker onChange={onChange} />
-);
-
-const AppWithRangeAndInPortuguese = ({ onChange }) => (
-  <SemanticDatepicker locale="pt-BR" onChange={onChange} type="range" />
-);
-
-const WithReactHook = () => {
+const AppWithBasic = () => {
   const [currentDate, setNewDate] = useState('');
+  <SemanticDatepicker onChange={(event, data) => setNewDate(data.value)} />;
+};
+
+const AppWithRangeAndInPortuguese = () => {
+  const [currentRange, setNewRange] = useState([]);
   return (
-    <div>
-      <SemanticDatepicker onChange={(event, date) => setNewDate(date.value)} />
-      <p>Date selected: {currentDate.toString()}</p>
-    </div>
+    <SemanticDatepicker
+      locale="pt-BR"
+      onChange={(event, data) => setNewRange(data.value)}
+      type="range"
+    />
   );
 };
 ```

From c0c8e5fb51d5853cbe9a9231648b5a2488b42157 Mon Sep 17 00:00:00 2001
From: artawood <artawood.gmail.com>
Date: Tue, 14 Jan 2020 12:04:49 +0700
Subject: [PATCH 3/5] separate onChange function

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8baff621..30d2abcd 100644
--- a/README.md
+++ b/README.md
@@ -51,15 +51,17 @@ import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
 
 const AppWithBasic = () => {
   const [currentDate, setNewDate] = useState('');
-  <SemanticDatepicker onChange={(event, data) => setNewDate(data.value)} />;
+  const onChange=(event, data) => setNewDate(data.value)
+  <SemanticDatepicker onChange={onChange} />;
 };
 
 const AppWithRangeAndInPortuguese = () => {
   const [currentRange, setNewRange] = useState([]);
+  const onChange = (event, data) => setNewRange(data.value)
   return (
     <SemanticDatepicker
       locale="pt-BR"
-      onChange={(event, data) => setNewRange(data.value)}
+      onChange={onChange}
       type="range"
     />
   );

From c7a77e924b13988a113c5967efd47503f12b93df Mon Sep 17 00:00:00 2001
From: artawood <artawood.gmail.com>
Date: Tue, 14 Jan 2020 12:07:12 +0700
Subject: [PATCH 4/5] added semi-colon

---
 README.md | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 30d2abcd..eb362eb0 100644
--- a/README.md
+++ b/README.md
@@ -51,20 +51,14 @@ import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
 
 const AppWithBasic = () => {
   const [currentDate, setNewDate] = useState('');
-  const onChange=(event, data) => setNewDate(data.value)
+  const onChange = (event, data) => setNewDate(data.value);
   <SemanticDatepicker onChange={onChange} />;
 };
 
 const AppWithRangeAndInPortuguese = () => {
   const [currentRange, setNewRange] = useState([]);
-  const onChange = (event, data) => setNewRange(data.value)
-  return (
-    <SemanticDatepicker
-      locale="pt-BR"
-      onChange={onChange}
-      type="range"
-    />
-  );
+  const onChange = (event, data) => setNewRange(data.value);
+  return <SemanticDatepicker locale="pt-BR" onChange={onChange} type="range" />;
 };
 ```
 

From aac737cdea333baf1a7397e925c0ddd54ab94769 Mon Sep 17 00:00:00 2001
From: artawood <artawood.gmail.com>
Date: Tue, 14 Jan 2020 15:28:30 +0700
Subject: [PATCH 5/5] replace empty string with null as initial state

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index eb362eb0..b0451e7b 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ import SemanticDatepicker from 'react-semantic-ui-datepickers';
 import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
 
 const AppWithBasic = () => {
-  const [currentDate, setNewDate] = useState('');
+  const [currentDate, setNewDate] = useState(null);
   const onChange = (event, data) => setNewDate(data.value);
   <SemanticDatepicker onChange={onChange} />;
 };