/*! For license information please see 1650227e.6337b9cb.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[3889],{47458:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>l,contentTitle:()=>u,default:()=>g,frontMatter:()=>r,metadata:()=>a,toc:()=>i});var n=o(85893),s=o(11151);const r={sidebar_position:2,title:"useToggle",comment:!0,tags:["Reactjs","Custom Hook","useToggle"]},u=void 0,a={id:"reactjs/custom-hook/use-toggle",title:"useToggle",description:"",source:"@site/issues/reactjs/custom-hook/use-toggle.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-toggle",permalink:"/issues/reactjs/custom-hook/use-toggle",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-toggle.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useToggle",permalink:"/issues/tags/use-toggle"}],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,title:"useToggle",comment:!0,tags:["Reactjs","Custom Hook","useToggle"]},sidebar:"tutorialSidebar",previous:{title:"useStateProxy",permalink:"/issues/reactjs/custom-hook/use-state-proxy"},next:{title:"useTimeout",permalink:"/issues/reactjs/custom-hook/use-timeout"}},l={},i=[];function c(e){const t={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useToggle = (defaultValue) => {\n  const [value, setValue] = useState(defaultValue);\n\n  const toggleValue = (value) => {\n    setValue((currentValue) => {\n      return typeof value === 'boolean' ? value : !currentValue;\n    });\n  };\n\n  return [value, toggleValue];\n};\n\nfunction ToggleComponent() {\n  const [value, setToggle] = useToggle(false);\n\n  return (\n    <div>\n      <div>Value: {`${value}`}</div>\n      <div>\n        <button onClick={setToggle}>Toggle</button>\n      </div>\n\n      <div>\n        <button onClick={() => setToggle(true)}>Set True</button>\n      </div>\n\n      <div>\n        <button onClick={() => setToggle(false)}>Set False</button>\n      </div>\n    </div>\n  );\n}\n\n// Render App\nrender(<ToggleComponent />);\n"})})}function g(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},75251:(e,t,o)=>{var n=o(67294),s=Symbol.for("react.element"),r=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,a=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function i(e,t,o){var n,r={},i=null,c=null;for(n in void 0!==o&&(i=""+o),void 0!==t.key&&(i=""+t.key),void 0!==t.ref&&(c=t.ref),t)u.call(t,n)&&!l.hasOwnProperty(n)&&(r[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===r[n]&&(r[n]=t[n]);return{$$typeof:s,type:e,key:i,ref:c,props:r,_owner:a.current}}t.Fragment=r,t.jsx=i,t.jsxs=i},85893:(e,t,o)=>{e.exports=o(75251)},11151:(e,t,o)=>{o.d(t,{Z:()=>a,a:()=>u});var n=o(67294);const s={},r=n.createContext(s);function u(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:u(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);