Travis Arnold

Elite
@souporserious

design / systems / compilers / react

react-measure. ๐Ÿ“ Compute measurements of a React component.

1.9k

react-motion-ui-pack. Wrapper component around React Motion for easier UI transitions

624

renoun. Query and Render Your Codebase

606

react-media-player. React audio and video player.

471

restyle. The simplest way to add CSS styles to your React components.

450

react-view-pager. Slider/Carousel powered by React Motion.

294

unicon. ๐Ÿฆ„ Wrangle SVGs from your favorite design tool.

168

next-remote-refresh. Enable Fast Refresh for remote data in Next.js

150

react-aria. Utility components to help compose React ARIA components

145

react-fluid-container. Graceful dynamic/variable height animation

133

tsxmod. Refactor code, migrate to new APIs, and better understand your codebase.

114

lock-scrollbars. ๐Ÿ”’ Lock scrollbars recursively to prevent scrolling the page.

87

reforest. ๐ŸŒฒ Collect ordered React render data seamlessly across the server and client.

80

use-item-list. A primitive React hook used to coordinate indexed collections effortlessly.

73

sketch-to-svg-json-loader. Sketch to SVG JSON loader module for webpack

63

mdx-to-md. Convert MDX to Markdown.

60

packlink. A simple and reliable way to test pnpm packages locally without publishing.

56

documenting-systems-in-nextjs. Case study of how to build a documentation system in Next.js using TS Morph.

55

next-monaco. TypeScript

52

outy. A simple way to listen for events outside of elements in 390 bytes

31

react-paper-ripple. Paper ripple animations inspired by Google Material Design

31

react-matches. Simple helper components to make responsive design easier in React.

29

animated-ui. Components for UI animations powered by Animated

21

react-component-query. Component queries in React

21

build-your-own-code-playground. A simple React code playground built in Next.js

21

next-dx. Enhance Next.js development with utilities for local and remote content.

21

get-node-dimensions. Get accurate element dimensions, even if it's hidden!

20

react-midnight. Handle dates, times, and calendars with React.

19

selectly. Build composeable select menus for React.

18

velocitytransitiongroup. React addon component to easily use Velocity animations in React.

17

docgraph. Generate rich documentation data for TypeScript and MDX codebases.

17

use-roving-index. Manage an active index that needs to be contained or wrapped.

16

golly. Powerful flexbox grid system built on top of glamor.

12

tonality. Some small functions to help build and adjust color tone palettes.

11

use-scroll-sync. Sync scroll positions between multiple elements.

10

use-ref-list. Easily manage an ordered list of refs in React.

9

react-travel. JavaScript

8

react-motion-sortable. Sortable components powered by React Motion.

8

monaco-textmate-syntax-highlighting. Monaco TextMate Syntax Highlighting in Next.js

7

bundling-typescript-with-esbuild-for-npm. Example of bundling TypeScript using Esbuild.

7

create-styled-element. Simple wrapper around glamor to create styled elements in React.

6

managing-design-systems-with-typescript. An example of how to manage Design Systems with TypeScript.

4

react-rails-theme-provider. Demo of setting up ThemeProvider with react-rails

4

react-aria-ui. Collection of ARIA compliant React components.

4

react-editable. Build flexible WYSIWYG editors with ease

4

better-library-dx-using-jsdoc-links. Example of using Babel to enrich JSDoc links with helpful links.

3

mdx-with-jsx-import-source. TypeScript

1
47
Apply