Ryan Hefner

—

All Play

Projects / Open–Source Software

next-meta

Easily compose and manage meta and open graph tags in your Next.js app/site.

react-marquease

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

react-contentful

React library for interacting with and rendering Contenful data.

contentful-parsers

Library of useful parsers to use when working with Contentful API responses.

lomit

Lightweight version of Object omit.

contentful-sitemap

Easily generate a sitemap.xml file that consists of both static routes and dynamic routes generated from Contentful content.

quiktime

Quickly format duration time values in a condensed format.

react-timer-wrapper

Composable React Timer component that passes its status to its children.

react-scroll-trigger

React component tied to scroll events with callbacks for enter, exit and progress while scrolling through the viewport.

react-hoc-helpers

Some helper functions that you typically need when writing React Higher-Order Components.

react-timecode

Simple React component for displaying a timecode, with various format options.

clean-react-props

Utility function for passing clean props to DOM elements in React.

creature-cache

A cache that can be generated server-side and brought back to life client-side.

react-speedo

Tooling to help you monitor the performance of your React applications.

react-maps-google

React component that allows you to easily created a styled Google Maps instance with custom markers.

react-canvas-wrapper

React wrapper around a canvas element with a clean API for drawing.

apollo-link-performance

Easily log and report on the performance of your GraphQL queries.

rikey

Useful utilities for manipulating–and creating–Object instances.

react-target-scroller

React component that scrolls smoothly to the target element passed in via props.

react-hash-handler

React component that makes it easy to compose hashchange and hash click handling into your application or site.

react-zendesk-helpcenter

React library that makes it easy to render Zendesk Help Center content in your React apps.

react-indicators

Simple, 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.

apollo-link-contentful

Perform GraphQL queries against Contentful’s Rest API. No more, query size limits! No more, query complexities!!

object-assign-polyfill

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

file-counter

Recursively count the number of files within a directory, and all of its subdirectories. Apply filters to exclude files or directories from the total.

calculate-aspect-ratio

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

next-proper

Easily compile NextJS props via composed methods for `getServerSideprops` and `getStaticProps`.

next-utils

Collection of handy utility functions for working within a Next.js project.

tweenkle

Lightweight tweening library for all your tweening and animation needs.

stylex

Easily convert CSS styles between the DOM and Javascript, and back.

use-ref-map

Dynamically generate and reference React ref instances with this handy hook.

@ryanhefner /react-prismic

Easily compose Prismic requests and data into your React applications.

mathleet

Library of helpful math utilities.

parallaxed

Easily apply parallax effects to page elements as you scroll.

react-animate-props

React higher order component method that transforms your favorite components to animate their props on change.

next-request-block

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

react-request-block

React component to compose requests within your components. Supports server-side rendering requests.

next-contentful

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

filesizes

Command line utility for outputing the size of files within a given directory.

react-video-players

React video player component library that offers a consistent API across YouTube and Vimeo video player React components.

@ryanhefner /next-prismic

Compose Prismic queries into your Next.js projects.

react-paging-indicators

Generic React paging indicators that you can use in carousels, rotators, slideshows and more!

react-rotator

Flexible React component for composing rotators, carousels, slideshows and more.

Subscribe to the
—All Play newsletter

Get updates when I publish new episodes, and post about other fun stuff that I’m into.

With OSS

©2004—2025 — Ryan Hefner.
May all your days be rad 🤙.

GitHubBluesky