React rendering
Take a deep dive into React's rendering process to understand the basics, performance optimization and the role of state management in it.
React Snippets
The React snippet collection contains function components and reusable hooks for React 18.
-
React · -
React · Advanced React state hooks
Is
useState()too limited for you? PerhapsuseReducer()doesn't quite cut it either? Let's explore some advanced state management hooks. -
React · Tag input field
Create a custom input field with selectable tags, using React.
-
React · Mapping data structures to React components
Ever wanted to transform an array into a table or an object into a tree view? Here are some React components that can help you do just that.
-
React · Tooltips, alerts and modals in React
Dialog components like tooltips, alerts and modals are essential for user interaction. Learn how to create them in React.
-
React · Stateful checkbox with multiple selection
Render a checkbox list that uses a callback function to pass its selected value/values to the parent component.
-
React · Collapsible content React components
Collapsible content is a common UI pattern. Learn how to create collapsible content components in React in this short guide.
-
React · Testing React components that update asynchronously with React Testing Library
Testing React components that update asynchronously is pretty common. Learn how to deal with common issues and speed up your testing.
-
React · Button with ripple effect
Learn how to create an animated button with a ripple effect when clicked.
-
React · React hooks to handle window and environment events
Learn how to use React hooks to handle window events, media queries, server-side rendering and more.
-
React · Create a textarea React component with word or character limit
Create your custom textarea components, with a word or character limit in React.
-
React · Star rating component
Create your very own star rating component in React.
-
React · React useHash and useSearchParam hooks
Track the browser's location hash value and search params with this pair of custom hooks.
-
React · React useClickOutside and useClickInside hooks
Learn how to effectively handle the click event outside or inside a component using custom hooks.
-
React · Listening for events with React hooks
Learn how to create custom hooks to listen for events in React.
-
React · File drag and drop area
Create a file drag and drop React component for a single file.
-
React · React useMutationObserver hook
Use the
MutationObserverAPI to watch for changes made to the DOM tree. -
React · React useFetch hook
Implement
fetch()in a declarative manner using React hooks. -
React · How can I set the value of a select input in React?
Learn of all the different ways to set the value of a selected input in React with this quick guide.
-
React · React useScript hook
Ever wanted to dynamically load an external script in React? Here's a trick to help you out.
-
React · React useBodyScrollLock hook
Do you need to lock the body scroll when a modal is open? Perhaps this custom hook can help.
-
React · React useRequestAnimationFrame hook
Turn
requestAnimationFrame()into a custom hook to animate your React components. -
React · Persisting state in React
Learn how to persist state in React using hooks and
localStorageorsessionStorage. -
React · Lazy-loading images in React
Learn how to create your own lazy loading image component in React.