React Element Resources

👀 Why When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit

@master/style-element.react Quickly create reusable React elements driven by class names. ~800B 🔴 Traditionally, you would extract a reusable element

icon-svg Memoized fetch SVG icons from many popular icon sets with editor autocomplete and a Web Component ready to use npm i icon-svg pnpm add icon-s

react-tiny-autoscroll Automatically scrolls the element when the cursor approaches the boundaries. Demo Mostly helpful when used in combination with d

dark-mode A custom element that allows you to easily put a Dark Mode 🌒 toggle. so you can initially adhere to your users' preferences according to pr

An attempt to recreate the SplitView element from WinJS, with full TypeScript definitions

Modal window for React applications A simple to use hook for creating a modal-wi

Element React Element was initially written in Vue, which has many elegant UI components, but we also love React, so we forked it for the React commun

A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. Installation Using npm (use --save to include it i

React Animate Height Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific

React Aspect Ratio This is a React implementation for aspect ratio placeholder preventing browser reflow before browser downloads and renders your com

React Waypoint A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the windo

htmr Simple and lightweight ( 2kB) HTML string to react element conversion library Install $ yarn add htmr # or $ npm install htmr --save Usage Use

react-awesome-audio Optimized and Supercharged React hook to play audio without any DOM element 💪 🎧 Find the npm package here Star the GitHub repo t

React Motion Router Declarative routing library for React ⚛ with page transitions and animations 🚀 . Under Development 🧪 . Based on React Router and

tsx-source-jump Jump from the HTML element to the source code of the generator.

Anim react element easily

React Container Query True modularity in styling responsive component. Installation npm i -D react-container-query Disclaimer I am providing code in t

Note! The docs here are for the v1.0.0 alpha. This is not ready for production use yet. You should use this README, which refers to 0.10.0, the latest

React Time Component for React to render relative and/or formatted dates by using time HTML5 element and preserving machine readable format in datet

ARCHIVED This module is no longer maintained. Much of this behaviour can now be more easily and efficiently achieved with an IntersectionObserver, mak

react-simple-knob A simple knob element for react. Installing $ npm i --save react-simple-knob or $ yarn add react-simple-knob Usage Import the compon

react-element-pan React component for allowing panning of DOM-elements too large for their container, in a Google Maps-like way. Supports touch device

Popeye A native react popup component that can be anchored to any element. Disclaimer Can only be used on cases wherein you're sure that the popover w

Handle element resizes like it's 2021! Live demo Nowadays browsers support element resize handling natively using ResizeObservers. The library uses th

A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. Installation Using npm (use --save to include it i

React Infinity is an implementation of the UITableView from iOS for the web. (Another famous implementation is Infinity.js by AirBnB.) React Infinity

react-numeral-input It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 -

react-map-interaction Add map like zooming and panning to any React element. This works on both touch devices (pinch to zoom, drag to pan) as well as

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

react-st-modal React St Modal is a simple and flexible library for implementing modal dialogs. Features Simple and easy to use api Compatible with mob

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

React-Native List View Select Installation instructions npm install --save react-native-list-view-select This module started as a personal fork of Rea

react-native-shared-element Native shared element transition "primitives" for react-native 💫 This library in itself is not a Navigation- or Router li

Ninja Keys Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React. 🚧 Work in progress. That's first shot for

react-intersection-observer React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. Contains

React Card Rotate Swiper a react component to swipe element using rotate Demo Installation npm install --save react-card-rotate-swiper Usage import {

inspx Pixel perfect layout inspection. Built for React as a proof of concept. Setup Install the package: npm install inspx --save-dev Wrap the root of

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

react-native-screcorder A react native component to capture pictures and record Video with Vine-like tap to record, animatable filters, slow motion, s

⚛️ A React Hook to monitor changes in the size of an element using native ResizeObserver API 🔍

react-smooth-list 🍿 React component for animating an element's children, one by one. Installation This package is distributed via npm. npm install re

Detect when an element is becoming visible or hidden on the page.

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

react-archer 🏹 Draw arrows between DOM elements in React 🖋 Installation npm install react-archer --save or yarn add react-archer Example Try it out!

Very simple react component for rotate element based on scroll position

#DEPRECATED dashed border already works on react native 0.19+. Use style : { borderStyle: 'dashed' } in your stylesheet. react-native-dashed-border Ve

react-native-dial This package powers Yeti Smart Home and is used in production. A react native reusable and efficient dial knob element. import { Dia

Note! The docs here are for the v1.0.0 alpha. This is not ready for production use yet. You should use this README, which refers to 0.10.0, the latest

React Container Query True modularity in styling responsive component. Installation npm i -D react-container-query Disclaimer I am providing code in t

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab 📑 Install npm install react-hook-mi

Make your React Components aware of their width and/or height! Blazingly fast. 😛 Responsive Components! Easy to use. Extensive browser support. Suppo

react-container-dimensions Wrapper component that detects parent (container) element resize and passes new dimensions down the tree. Based on element-

React Waypoint A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the windo

react-track Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a wa

@rehooks/usePosition React hook for ... Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final. You'll

React hook to detect click or touch events React hook useClickAway() that reacts to clicks outside the bound element, and calls the expression that is

react-hooks-visible react-hooks-visible is React Hooks library for element visibility. Uses the intersection observer API. demo Get started yarn add r

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab 📑 Install npm install react-hook-mi

REACT COOL DIMENSIONS A React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. T

@rehooks/component-size Install yarn add @rehooks/component-size Usage import { useRef } from 'react' import useComponentSize from '@rehooks/component