Don’t yap just give me the links Ok I get it you’re busy here you go: GitHub RepoNPM Package GitHub Repo GitHub Repo NPM Package NPM Package Have a great day! What’s This? I’ve been developing react since 2013 it’s been through a lot of changes and updates over the years. We’ve seen patterns come and go, however when hooks were introduced in 2019, I was instantly … hooked. No wait please don’t leave, that was a good joke and you know it! Anyhow now that that’s out of the way, I wanted to share with you a collection of various hooks that I have written over and over and over again in my past projects. These hooks have been battle tested in production applications and multiple client, personal and professional projects. Why Open Source? Well I have this post on my blog about why I believe everyone should open source their work, Open Source Your Projects I’ve been recently redesigning my website and fixing up my old blog posts and I stumbled upon this one decided to re-read it fully and discovered I am a hypocrite by value of pure laziness. Open Source Your Projects Yes I did not open source these hooks sooner, because I was simply lazy. I had them in various different projects, repos, side projects etc. etc. But I never took the time to actually put them together in a single package and publish it. I just kept either navigating to these projects and constantly copy pasting them around OR worse yet I would rewrite them from scratch every time I needed them, which is just plain dumb. So I decided to stop being a hypocrite and finally open source a bunch of my stuff part of that was the task of collecting all of these react hooks and putting them together in a single package. So here it is Introducing React-Kata GitHub RepoNPM Package GitHub Repo GitHub Repo NPM Package NPM Package React-Kata is a collection of battle-tested React hooks that I’ve used in various projects over the years. These hooks are designed to make your life easier and help you write cleaner, more efficient code. Why React-Kata? Kata is a term used in martial arts to describe a set of movements and techniques that are practiced repeatedly to improve skill and mastery. Similarly, React-Kata is a collection of hooks that I’ve rewritten and reused and refined over and over again. So I thought it would be appropriate to name it React-Kata. Also I did martial arts as a younger person and wanted to show off a bit, lay off. Examples: useLocalStorage: A hook that makes it easy to work with local storage in your React applications.useDebounce: A hook that debounces a value, making it easier to work with user input and avoid unnecessary re-renders.useThrottle: A hook that throttles a value, making it easier to work with user input and avoid unnecessary re-renders.useTimeout: A hook that makes it easy to work with timeouts in your React applications.useInterval: A hook that makes it easy to work with intervals in your React applicationsuseSessionStorage: A hook that makes it easy to work with session storage in your React applications. useLocalStorage: A hook that makes it easy to work with local storage in your React applications. useLocalStorage useDebounce: A hook that debounces a value, making it easier to work with user input and avoid unnecessary re-renders. useDebounce useThrottle: A hook that throttles a value, making it easier to work with user input and avoid unnecessary re-renders. useThrottle useTimeout: A hook that makes it easy to work with timeouts in your React applications. useTimeout useInterval: A hook that makes it easy to work with intervals in your React applications useInterval useSessionStorage: A hook that makes it easy to work with session storage in your React applications. useSessionStorage and many many more in fact to see a lot of all of them check out the GitHub Repo Hooks overview GitHub Repo Hooks overview Code Examples useShimmer This hook generates a shimmer effect SVG that can be used as a placeholder while content is loading. It takes width and height as parameters and returns an SVG string. import { useShimmer } from 'react-kata';

function ShimmerDemo() {
  const shimmer = useShimmer(400, 300);
  return <img src={`data:image/svg+xml;utf8,${encodeURIComponent(shimmer)}`} alt="Loading..." />;
} import { useShimmer } from 'react-kata';

function ShimmerDemo() {
  const shimmer = useShimmer(400, 300);
  return <img src={`data:image/svg+xml;utf8,${encodeURIComponent(shimmer)}`} alt="Loading..." />;
} useWhyDidYouUpdate This hook helps you identify why a component re-rendered by logging the changed props to the console or handling them with a custom callback. I can not overstate how often this one has saved my ass in the past. import React, { useState } from 'react';
import { useWhyDidYouUpdate } from 'react-kata';

function Demo(props) {
  // Logs changed props to console by default
  useWhyDidYouUpdate('Demo', props);
  // Or provide a callback to handle changes
  useWhyDidYouUpdate('Demo', props, changedProps => {
    // Custom handling, e.g. send to analytics
    alert('Changed: ' + JSON.stringify(changedProps));
  });
  return <div>{props.value}</div>;
} import React, { useState } from 'react';
import { useWhyDidYouUpdate } from 'react-kata';

function Demo(props) {
  // Logs changed props to console by default
  useWhyDidYouUpdate('Demo', props);
  // Or provide a callback to handle changes
  useWhyDidYouUpdate('Demo', props, changedProps => {
    // Custom handling, e.g. send to analytics
    alert('Changed: ' + JSON.stringify(changedProps));
  });
  return <div>{props.value}</div>;
} useTheme Let’s you simply manage themes in your application. Supports auto, light, dark, and custom themes. For custom themes you simply input the name of the theme and it will be applied as the data-theme attribute on the html element. It will also be stored in local storage and retrieved from local storage on page load. import React from 'react';
import { useTheme } from 'react-kata';

function Demo() {
  // Supports auto, light, dark, and custom themes
  const [theme, setTheme, toggleTheme] = useTheme(["auto", "light", "dark", "solarized"]);
  return (
    <div>
      <span>Current theme: {theme}</span>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => setTheme("solarized")}>Solarized</button>
      <button onClick={() => setTheme("auto")}>Auto</button>
    </div>
  );
} import React from 'react';
import { useTheme } from 'react-kata';

function Demo() {
  // Supports auto, light, dark, and custom themes
  const [theme, setTheme, toggleTheme] = useTheme(["auto", "light", "dark", "solarized"]);
  return (
    <div>
      <span>Current theme: {theme}</span>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => setTheme("solarized")}>Solarized</button>
      <button onClick={() => setTheme("auto")}>Auto</button>
    </div>
  );
} useReload Allows you to pass a custom condition that when met will trigger a page reload. import React from 'react';
import { useReload } from 'react-kata';

function Demo() {
  // Only reload if user confirms
  const reload = useReload(() => window.confirm('Reload?'));
  return <button onClick={reload}>Reload Page</button>;
} import React from 'react';
import { useReload } from 'react-kata';

function Demo() {
  // Only reload if user confirms
  const reload = useReload(() => window.confirm('Reload?'));
  return <button onClick={reload}>Reload Page</button>;
} Conclusion I hope you find these hooks as useful as I have. If you have any suggestions for new hooks or improvements to existing ones, please feel free to open an issue or submit a pull request on GitHub, I’ll always appreciate feedback, criticism, suggestions and especially Pull Requests. Happy coding!

Releasing My Production-Ready React Hooks as Open Source

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

9 Compelling Reasons Why You Should Open Source Your Projects

10 Best Python Tools, Libraries, and IDEs You Can Learn to Become a Better Python Programmer

4 Great Python Libraries You Wish You Came Across Earlier

7 Kotlin Libraries Every Developer Should Know

A New Utility Library Designed to Get Things Done

9 Compelling Reasons Why You Should Open Source Your Projects

10 Best Python Tools, Libraries, and IDEs You Can Learn to Become a Better Python Programmer

4 Great Python Libraries You Wish You Came Across Earlier

7 Kotlin Libraries Every Developer Should Know

A New Utility Library Designed to Get Things Done

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps