use-simple-hooks

Use-Custom-Simple-Hooks

A collection of custom React hooks that could be useful

Installation

Install my-project with npm

  npm install use-simple-hooks

Install with yarn

  yarn add use-simple-hooks

Features

• Toggle Custom Hook
• Form Custom Hook

Usage/Examples

useForm

const initValue = { name: '' };
const App = () => {
  const [display, setDisplay] = useState(false);
  const { form, handleChange, onSubmit } = useForm(initValue, () =>
    setDisplay(true)
  );
  return (
    <div>
      <form onSubmit={onSubmit}>
        <label id="name-label">Name</label>
        <input
          aria-label="name-label"
          name="name"
          onChange={handleChange}
          value={form.name}
          type="text"
        />
        <button type="submit">Submit</button>
      </form>
      {display && <h1>Hello {form.name}</h1>}
    </div>
  );
};

useToggle

const App = () => {
    const { toggle, handleToggle, handleToggleOn, handleToggleOff } = useToggle()
  );
  return (
    <div>
        <button onClick={handleToggle}>Toggle Display</button>
        {toggle && <h1>Hello There! </h1>}
    </div>
  );
};

License

MIT

Lessons Learned

What did you learn while building this project?

Learning how to use TypeScript and publishing an npm package.