Skip to content

㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern

Notifications You must be signed in to change notification settings

jaredLunde/render-props

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation






Easy-to-use render props (function as child) components for common needs

https://www.npmjs.com/org/render-props

Packages

Contents


General Purpose


Value @render-props/value

A component with an interface for setting, clearing and resetting values in a controlled or uncontrolled setting.

Toggle @render-props/toggle

A component with an interface for toggling values between on/off states in a controlled or uncontrolled setting.

Events @render-props/events

A component with an interface for managing events registered by its child components. This component will automatically 'garbage collect' listeners when it unmounts.

Counter @render-props/counter

A component with an interface for bound-value counting.

Point @render-props/point

A component with an interface for setting and moving coordinate {x, y} values.

Items @render-props/items

Components called Items and ItemSet with an interface for adding and removing items from arrays and sets while maintaining immutability on those arrays and sets, allowing for strict-comparison in child components.

Choices @render-props/choices

Components that provides an interface for making selections from a group of choices. The Choices component itself is a context provider which can be used with the Choice and ChoicesConsumer components for deep-tree selections. It does not have to be used with these components, however.

Subscriptions @render-props/subscriptions

A component for communicating changes to the state of one component to another component(s). This was much more useful before the React.createContext API in React 16.3 for ensuring context updates reached their consumers.

Paragraphs @render-props/paragraphs

A component an interface for creating paragraphs with line breaks from raw text with \n new lines.


Throttling State


Throttle @render-props/throttle

A component for throttling state changes with requestAnimationFrame

Debounce @render-props/debounce

A component for debouncing state changes with lodash's debounce function


DOM


Mouse Events


Click @render-props/click

A component with an interface for targeting specific types of click events (e.g. double-click) and extracting rich stats about click position within the client, window, etc. making it perfect for UX analytics work and in-browser gaming.

Hover @render-props/hover

A component with an interface for listening to hover events on child components. The state of this component will only update if the device being used supports hover according to !(window.matchMedia('(hover: none)').matches)

MousePosition @render-props/mouse-position

A component with a performant interface for tracking the position of the mouse as it moves around the screen - perfect for UX analytic tracking and also in-browser gaming.


Sizing


Rect @render-props/rect

A component with an interface for retrieving the DOMRect of an element.

SizeObserver @render-props/size-observer

A component with an interface for constantly querying for changes to the size of the referenced element in its child function.

ImageProps @render-props/image-props

A component with an interface for getting the natural size, rendered size and orientation from <img> elements after they have loaded successfully.


Scrolling + Window


Viewport @render-props/viewport

Multiple components for listening and responding to viewport events in a scalable fashion.

Scrollable @render-props/scrollable

A component with an interface for listening to the scroll event of its child component and providing valuable data about direction, distance, and more. It also provides convenience functions for scrollTo with optional animation.


Styles


WillChange @render-props/will-change

A component with an interface for applying CSS will-change styles to its child components when given events fire. This is incredibly useful because browsers recommend that you use this CSS property sparingly, as it's a GPU-hog. You should really only be applying it directly before the event occurs.


Utils


compose @render-props/compose

A utility for flattening nested render props component calls safely and in a way that doesn't take a huge performance hit.

import compose from '@render-props/compose'
import Toggle from '@render-props/toggle'
import Counter from '@render-props/counter'

const Composed = compose({
  toggle: Toggle,
  counter: Counter
})

<Composed toggle={propsPassedToToggle} counter={propsPassedToCounter}>
  {function ({toggle, counter}) {
    // toggle = render props returned by the Toggle component
    // counter = render props returned by the Counter component
  }}
</Composed>

About

㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published