2 passes :
- 1st pass during SSR/SSG
- 2nd pass after rehydration during the first update
To render only on the 2nd pass :
function ClientOnly({ children, ...delegated }) {
const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return (
<div {...delegated}>
{children}
</div>
);
}
Used with :
<ClientOnly>
<Navigation />
</ClientOnly>
Source : https://www.joshwcomeau.com/react/the-perils-of-rehydration/
const useAnimationFrame = callback => {
// Use useRef for mutable variables that we want to persist
// without triggering a re-render on their change
const requestRef = React.useRef();
const previousTimeRef = React.useRef();
const animate = time => {
if (previousTimeRef.current != undefined) {
const deltaTime = time - previousTimeRef.current;
callback(deltaTime)
}
previousTimeRef.current = time;
requestRef.current = requestAnimationFrame(animate);
}
React.useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
}, []); // Make sure the effect runs only once
}
const Counter = () => {
const [count, setCount] = React.useState(0)
useAnimationFrame(deltaTime => {
// Pass on a function to the setter of the state
// to make sure we always have the latest state
setCount(prevCount => (prevCount + deltaTime * 0.01) % 100)
})
return <div>{Math.round(count)}</div>
}
Source : https://css-tricks.com/using-requestanimationframe-with-react-hooks/
Split-Pane React component, can be nested or split vertically or horizontally!
Insert Awesome Shapes into Your React Site with Ease.
A flexible React Hook for using Local Storage.
React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron. An opinonated approach to supporting multiple platforms with React Native using a Yarn Workspaces monorepo.
React library for building workflow editors, flow charts and diagrams
REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.
Simple React hooks, ready to use, written in typescript.
- useBoolean()
- useCopyToClipboard()
- useCounter()
- useDarkMode()
- useDebounce()
- useElementSize()
- useEventListener()
- useFetch()
- useHover()
- useImageOnLoad()
- useIntersectionObserver()
- useInterval()
- useIsClient()
- useIsMounted()
- useLocalStorage()
- useLockedBody()
- useMap()
- useOnClickOutside()
- useReadLocalStorage()
- useScreen()
- useScript()
- useSsr()
- useTimeout()
- useWindowSize()
Verbum is a fully flexible text editor based on lexical framework.
Verbum - Flexible Text Editor for React
Verbum is a fully flexible rich text editor based on lexical-playground and lexical framework.
React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products.
A tiny (96B) library for serializing Object values to Strings.
This module's intended use is for converting an Object with CSS class names (as keys) to a space-delimited className string. Other modules have similar goals (like classnames), but obj-str only does one thing. This is why it's only 100 bytes gzipped!
import React from 'react';
import objstr from 'obj-str';
const TodoItem = ({ text, isDone, disabled }) => (
<li className={ objstr({ item:true, completed:isDone, disabled }) }>
<input type="checkbox" disabled={ disabled } checked={ isDone } />
<label>{ text }</label>
</li>
);```
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.
Homepage with a nice animation/effect : https://zustand.surge.sh/
Mobile UI components made with Tailwind CSS
Tailwind Mobile - Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte
Develop, test and document your React story components faster
Alternative to storybook
Hooks for virtualizing scrollable elements in React
React code splitting made easy
Pixel perfect mobile UI components built with Tailwind CSS With iOS and Material Design components for React, Vue & Svelte
A tiny (228B) utility for constructing className strings conditionally from string, array, object...
Hooks for building lightweight, fast and extendable datagrids for React
A sortable, virtual, customizable tree component for React.
Sanity.io a platform for structured content that comes with an open source editor that you can customize with React.js.
Unstyled, accessible components for building high‑quality design systems and web apps in React.
Simple, immersive and interactive charts for React
React library to support easy zoom, pan, pinch on various html dom elements like images and divs
A production-ready motion library for React.
Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.
Beautifully crafted unique avatar placeholder for your next react project
Framer Motion 3D is a simple yet powerful animation library for React Three Fiber. It offers most of the same functionality as Framer Motion for declarative 3D scenes.
Enterprise Client-Side Routing for React
A fully featured react components library
CSS-in-JS with ahead-of-time compilation.
Remotion is a suite of libraries building a foundation for creating videos programmatically using React.
Access thousands of icons as components on-demand universally.
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.
A set of high-quality accessible React UI components with the built-in dark mode using Tailwind CSS. Pre-designed headless ui and radix-ui.
React for CLIs. Build and test your CLI output using components.
Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. If you are already familiar with React, you already know Ink.
Since Ink is a React renderer, it means that all features of React are supported. Head over to React website for documentation on how to use it. Only Ink's methods will be documented in this readme.
Hooks for fetching, caching and updating asynchronous data in React
Improve how you architect webapps
Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.
Available for JavaScript, React and Vue.js
A spring physics based React animation library