feature: Added documentation to use the prop toggleCalendarOnIconClick

Added a documentation to demonstrate the usage of toggleCalendarOnIconClick prop to toggle the reactCalendar open status
Hacker0x01 · Dec 18, 2023 · d4790be · d4790be
1 parent 79b1595
commit d4790be
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
@@ -102,6 +102,7 @@ import ExternalForm from "../../examples/externalForm";
 import CalendarIcon from "../../examples/calendarIcon";
 import CalendarIconExternal from "../../examples/calendarIconExternal";
 import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon";
+import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -129,6 +130,10 @@ export default class exampleComponents extends React.Component {
       title: "Calendar Icon using External Lib",
       component: CalendarIconExternal,
     },
+    {
+      title: "Toggle Calendar open status on click of the calendar icon",
+      component: ToggleCalendarOnIconClick,
+    },
     {
       title: "Calendar container",
       component: CalendarContainer,

diff --git a/docs-site/src/examples/toggleCalendarOnIconClick.js b/docs-site/src/examples/toggleCalendarOnIconClick.js
@@ -0,0 +1,11 @@
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  return (
+    <DatePicker
+      showIcon
+      toggleCalendarOnIconClick
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+    />
+  );
+};