Dayvster 🌊

Posted on Oct 2 • Originally published at dayvster.com

My Battle Tested React Hooks Are Now Open Source

#react #typescript #javascript #webdev

Don't yap just give me the links

Ok I get it you're busy here you go:

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.

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

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 applications
useSessionStorage: A hook that makes it easy to work with session storage in your React applications.

and many many more in fact to see a lot of all of them check out the 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..." />;
}

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

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

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

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!

DEV Community