Tag input field
Create a custom input field with selectable tags, using React.
React Components
The React snippet collection contains function components and reusable hooks for React 18.
-
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 · Button with ripple effect
Learn how to create an animated button with a ripple effect when clicked.
-
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 · File drag and drop area
Create a file drag and drop React component for a single file.
-
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 · Lazy-loading images in React
Learn how to create your own lazy loading image component in React.
-
React · Toggle component
Render a simple toggle component in React.
-
React · Automatic text linking in React
Ever wondered how to detect links in plaintext strings and make them clickable? A little ingenuity combined with React can get you there.
-
React · React conditional className, empty strings and null
In React components, you might need to conditionally apply a
className. Learn how to handle empty values correctly using this handy tip. -
React · Countdown timer
Create a countdown timer that prints a message when it reaches zero, using React.
-
React · Show/hide password toggle component
Ever wanted to show the password the user is typing? Here's how you can create a password input field with a reveal button in React.
-
React · Email and callable telephone links
Render links formatted to send an email (
mailto:link) or call a phone number (tel:link). -
React · React PropTypes - objectOf vs shape
Learn the differences between
PropTypes.objectOf()andPropTypes.shape()and where to use each one with this quick guide.