This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useCallback, useMemo, useState } from "react"; | |
export default function useToggle() { | |
const [isToggle, setStateToggle] = useState(false); | |
const toggle = useCallback( | |
() => setStateToggle((prevValue) => !prevValue), | |
[] | |
); | |
//update here 👇 this using function | |
const getTogglerProps = useCallback( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useCallback, useMemo, useState } from "react"; | |
export default function useToggle() { | |
const [isToggle, setStateToggle] = useState(false); | |
const toggle = useCallback( | |
() => setStateToggle((prevValue) => !prevValue), | |
[] | |
); | |
//look here 👇 this object | |
const togglerProps = useMemo( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useToggle from "./useToggle"; | |
function App() { | |
const { togglerProps, isToggle } = useToggle(); | |
return ( | |
<div className="App"> | |
//before | |
<button {...togglerProps}>Click here</button> | |
{isToggle ? <h1>Hiiiiiiiii Geeks</h1> : null} | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useToggle from "./useToggle"; | |
function App() { | |
const {getTogglerProps,isToggle} = useToggle(); | |
return ( | |
<div className="App"> | |
//after | |
<button {...getTogglerProps()}>Click here</button> | |
{ | |
isToggle?<h1>Hiiiiiiiii Geeks</h1> :null | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//update | |
const getTogglerProps = useCallback( | |
(props) => ({ | |
is_on: `${isToggle}`, | |
onClick: toggle, | |
...props | |
}), | |
[toggle, isToggle] | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useCallback, useMemo, useState } from "react"; | |
const executeFunctions = (...funs) => (...args) => | |
funs.forEach((fun) => fun && fun(...args)); | |
export default function useToggle() { | |
const [isToggle, setStateToggle] = useState(false); | |
const toggle = useCallback( | |
() => setStateToggle((prevValue) => !prevValue), | |
[] | |
); | |
const getTogglerProps = useCallback( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"Typescript React Function Component": { | |
"prefix": "tf", | |
"body": [ | |
"", | |
"interface ${TM_FILENAME_BASE}Props {", | |
"$1", | |
"}", | |
"", | |
"export const $TM_FILENAME_BASE: React.FC<${TM_FILENAME_BASE}Props> = ({$2}) => {", | |
"\t\treturn ($3);", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "Elham Elshami", | |
"email": "elhamelshami.dev", | |
"linkedin": "linkedin.com/in/elham-elshami", | |
"medium": "medium.com/@elhamelshami.dev" | |
} |