ElhamFadel

{
  "name": "Elham Elshami",
  "email": "elhamelshami.dev",
  "linkedin": "linkedin.com/in/elham-elshami",
  "medium": "medium.com/@elhamelshami.dev"
}

ElhamFadel

"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);",

ElhamFadel

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(

ElhamFadel

//update
const getTogglerProps = useCallback(
  (props) => ({
    is_on: `${isToggle}`,
    onClick: toggle,
    ...props
  }),
  [toggle, isToggle]
);

ElhamFadel

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
      }

ElhamFadel

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>
  );

ElhamFadel

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(

ElhamFadel

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(