souporserious

function PageView({ children, currentViewIndex }) {
  const frameSize = useMotionValue('auto')
  const useMeasureRef = useMeasureEffect(
    viewNodes => {
      const viewMeasurements = viewNodes.map(node =>
        node.getBoundingClientRect()
      )
      const nextFrameSize = viewMeasurements[currentViewIndex]
      frameSize.set(nextFrameSize)
    },

souporserious

import {
  useCallback,
  useLayoutEffect,
  useRef,
  useEffect,
  useState,
} from 'react'
import mitt from 'mitt'

export function useRefs() {

souporserious

// Handle outside and local measurements easily
function Singular({ ref, value }) {
  const [width, setWidth] = useState(-1)
  const [useMeasureRef, useMeasureEffect] = useMeasure()
  useMeasureRef(ref)
  useMeasureEffect(
    ([node]) => {
      setWidth(node.offsetWidth)
    },
    [value]

souporserious

import { useCallback } from 'react'
import useConstant from 'use-constant'
import mitt from 'mitt'

function useMitt() {
  const emitter = useConstant(() => mitt())
  return {
    emitEvent: emitter.emit,
    useEvent: useCallback((eventName, onEvent) => {
      useEffect(() => {

souporserious

// hooks
function App() {
  const ref = React.useRef(null)
  const [height, setHeight] = React.useState(-1)
  React.useLayoutEffect(() => {
    setHeight(ref.current.offsetHeight)
  }, [])
  return <div ref={ref}>Height: {height}</div>
}

souporserious

import { useCallback, useRef } from 'react'

export function useRefManager() {
  const storedRefs = useRef({})
  const refCallbacks = useRef({})
  const getRef = useCallback(id => {
    if (!refCallbacks.current[id]) {
      refCallbacks.current[id] = ref => {
        if (!storedRefs.current[id] && ref) {
          storedRefs.current[id] = ref

souporserious

import * as React from 'react'
import { useScrollSync } from 'use-scroll-sync'

function App() {
  const ref1 = React.useRef()
  const ref2 = React.useRef()
  useScrollSync(ref1, ref2)
  return (
    <div>
      <div ref={ref1} />

souporserious

const fs = require('fs')
const glob = require('glob')
const del = require('del')
const unified = require('unified')
const markdown = require('remark-parse')
const stringify = require('remark-stringify')
const frontmatter = require('remark-frontmatter')

// https://unifiedjs.com/learn/guide/using-unified/
const processor = unified()

souporserious

import React from 'react'
import './styles.css'

const OverridesContext = React.createContext({})

function Override({ inherit, value, children }) {
  const overrides = React.useContext(OverridesContext)
  return (
    <OverridesContext.Provider
      value={inherit ? { ...value, ...overrides } : value}

souporserious

const App = () => (
  <Variants dark="@media (prefers-color-scheme: dark)">
    <Theme
      colors={{ foreground: '#111', background: '#fff' }}
      variants={{
        dark: {
          colors: { foreground: '#eee', background: '#222' },
        },
      }}
    >