jaredlunde/render-props

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

---

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

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

Packages

Contents

• General Purpose
• Throttling State
• DOM
  • Mouse Events
  • Sizing
  • Scrolling + Window
  • Styles
• Utils

---

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>

render-props's Issues

Use getBoundingClientRect() instead of .offsetLeft for computing elementX in MousePosition

First of all, cool library :)

I was trying to use elementX to get the current mouse position relative to the ref'd element, but found that .offsetLeft gets the left offset of the ref'd element relative to the offsetParent, not the position on the page, which MDN suggests using getBoundingClientRect for instead (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft).

If that's not the purpose of elementX, I'd love if we could add an extra prop for what I'm looking for. Happy to send a PR if you'd like :)

CJS output has `const`

It looks like the output for CJS isn't ready for browsers that don't support modules.

The build tool/step needs to be updated to convert newer syntax like const into alternatives that older browsers support