Ryan Hefner

react-scroll-trigger. 📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.

react-contentful. 📰 A React component library that makes it super simple to compose Contentful content into your sites and applications.

calculate-aspect-ratio. 📐 A simple utility function, and command line utility, for calculating an aspect ratio based on width and height.

next-contentful. 📰 React library for integrating react-contentful into the server-side rendering of your Next.js app.

stylex. Easily convert CSS styles from the DOM to Javascript, and back.

react-timer-wrapper. Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.

react-video-players. 📺 Library of React video player components that offer a consistent interface and callback system for Vimeo, YouTube and the <video> tag. Along with a handy higher order component for building your own 😉

contentful-sitemap. 🗺 Build a dynamic sitemap.xml file based on content pulled in from Contentful via the Contentful API.

contentful-parsers. 🧰 Toolbox of useful parsers to use when working with Contentful API responses.

react-animate-props. React higher order component and hook for transforming your favorite components to animate prop values on change.

googlecast-wrappers. Simplifying the creation of Google Cast (Chrome) Sender and Receiver apps.

react-maps-google. 🗺 React components that make it easy to add Google maps and markers to your React projects.

react-timecode. ⏳ Simple React component for displaying a timecode, with various formatting options.

react-rotator. 🎠 Flexible React component for composing rotators, carousels, slideshows and more.

tweenkle. ✨ Lightweight tweening library built for modern Javascript environments that favor small modular components over heavy monolithic bundled libraries.

clean-react-props. 🛁 Utility functions for passing clean React props to HTML and SVG elements.

react-zendesk-helpcenter. 📖 React library that makes it easy to render Zendesk Help Center content in your React apps.

react-canvas-wrapper. 🖼 React component that wraps a canvas element and offers a clean API for drawing.

apollo-link-contentful. 🔗 An ApolloLink that lets you perform GraphQL queries against Contentful’s Rest API. No more, query size limits! No more, query complexities!!

react-indicators. Responsive, canvas-based indicators that you can use to communicate the progress of loaders, timers or whatever else you might need a progress indicator for.

react-prismic. 📰 Easily compose Prismic requests and data into your React applications.

Object.assign. Simple ES6 Object.assign() polyfill for older environments.

creature-cache. 🧟‍♂️ An in-memory cache that can be restored/rehydrated (brought back to life) via a string or array to rebuild the cache Map.

next-utils. 🧰 Handy utilities for building React components that render as nice server-side as they do on the client.

next-meta. 🗣️ A composable React component for managing meta tags, Open Graph, and Twitter cards in Next.js applications.

next-prismic. 📰 React library for integrating @ryanhefner/react-prismic into the server-side rendering of your Next.js app.

filesizes. 📂⚖️ Easily review the size of files in a given directory and its subdirectories.

use-ref-map. 🪝 Dynamically generate and reference React reference instances with this handy hook.

react-request-block. React component to compose requests within your components, with support for server-side rendered requests.

react-marquease. 🐛 HTML <marquee>s, the React way (with some handy control features).

fork-twilio-video.js. Twilio’s Programmable Video JavaScript SDK

use-dependency-alert. 🚨 React hook for debugging hook dependency arrays to validate what is changing, and how often.

flagsmith-js-client. Javascript Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/

apps. Apps on the Contentful Marketplace and resources to build them

next-request-block. React library for integrating react-request-block into the server-side rendering of your Next.js app.

react-hoc-helpers. 🧰 Collection of helpful utilities and helpers for when working with React higher-order components (HOC).

package-template-rollup. Base structure that I have been using for the majority of the NPM packages I have written/maintain. Suggestions on how to make this nicer welcomed!

react-speedo. ⏱ Tooling to help you monitor the performance of your React applications.

graphiql. GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.

fork-react-native-screens. Native navigation primitives for your React Native app.

nextprops.

chakra-ui. ⚡️ Simple, Modular & Accessible UI Components for your React Applications

tfjs-models. Pretrained models for TensorFlow.js

ryanhefner. personal site

quiktime. ⏱ Quickly format duration time values in a condensed format.

react-target-scroller. 🎯 React component that smoothly scrolls to the target element passed in via props.

react-hash-handler. #️⃣ React component that makes it easy to compose hash change and click handling into your application or site.

lomit. 🪶 Lightweight object omit method, just because.

file-counter. Calculate the number of files within a directory and its subdirectories. Apply rules to filter files or directories from the total.