From 91ffb26962fe24ce7776fd32f95b10459201a4af Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 27 Nov 2020 09:41:31 +0200
Subject: [PATCH] Add useToggler snippet

---
 snippets/useToggler.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 snippets/useToggler.md

diff --git a/snippets/useToggler.md b/snippets/useToggler.md
new file mode 100644
index 000000000..d06e2807a
--- /dev/null
+++ b/snippets/useToggler.md
@@ -0,0 +1,28 @@
+---
+title: useToggler
+tags: hooks,state,callback,beginner
+---
+
+Provides a boolean state variable that can be toggled between its two states.
+
+- Use the `useState()` hook to create the `value` state variable and its setter.
+- Create a function that toggles the value of the `value` state variable and memoize it, using the `useCallback()` hook.
+- Return the `value` state variable and the memoized toggler function.
+
+```jsx
+const useToggler = initialState => {
+  const [value, setValue] = React.useState(initialState);
+
+  const toggleValue = React.useCallback(() => setValue(prev => !prev), []);
+
+  return [value, toggleValue];
+};
+```
+
+```jsx
+const Switch = () => {
+  const [val, toggleVal] = useToggler(false);
+  return <button onClick={toggleVal}>{val ? 'ON' : 'OFF'}</button>;
+};
+ReactDOM.render(<Switch />, document.getElementById('root'));
+```