react-children-reveal

npm i react-children-reveal

Simple and efficient react library to progressively reveal children components.

Works with React > 16.8+ (needs hooks support) and uses CSS animations under the hood.

Basic usage

Simply wrap children components inside a RCR (react-children-reveal) component to make them appear gradually.

import RCR from 'react-children-reveal'

const TodoList = props => (
  <div>
    <h1>My todos</h1>
    <ul>
      <RCR>
        <li>Buy groceries</li>
        <li>Clean the kitchen</li>
        <li>Feed the cat</li>
        <li>Get some rest</li>
      </RCR>
    </ul>
  </div>
)

Props

name	description	default value
delay	Time (ms) required until next child is revealed	0
onEnd	Callback function that is executed when all children are revealed	() => null
onRevealed	Callback function that is executed everytime a child is revealed. The offset of the revealed child is given as argument	offset => null
time	Reveal animation duration (ms)	1000
type	Animation type (either fadein / zoomin / hslidein or vslidein)	fadein

Examples

Display progression

import RCR from 'react-children-reveal'

const ColorfulSquares = props => {
  const ITEM_LEN = 15
  const [progression, setProgression] = useState(0)
  const items = []

  for(let i=0;i<ITEM_LEN;i++){
    items.push(Math.random() * 360 | 0)
  }

  return (
  <div>
    <h1>{progression} out of {ITEM_LEN} displayed</h1>
    <RCR onRevealed={offset => setProgression(offset)}}>
    {
      items.map((item, iItem) => (
        <div key={iItem} style={{
          margin: 5,
          width: 20,
          height: 20,
          display: 'inline-block',
          backgroundColor: `hsl(${item}, 65%, 65%)`,
        }} />
      ))
    }
    </RCR>
  </div>
  )
}

Display another div once every child is displayed

import RCR from 'react-children-reveal'

const TodoList = props => {
  const [allRevealed, setAllRevealed] = useState(false)
  const items = 'react-children-reveal'.split('')

  return (
  <div>
    {
      allRevealed && <h1>All set and done!</h1>
    }

    <RCR type="zoomin" time={1300} onEnd={() => setAllRevealed(true)}}>
    {
      items.map((item, iItem) => (
        <span key={iItem}>{item}</span>
      ))
    }
    </RCR>
  </div>
  )
}

Caveats

Since RCR relies on CSS transforms and animations, child component cannot have a transform or animation property tied to them.

Contributing

Any bugfix is welcome however there is no plan to add new features to this package in the future. Feel free to fork, copy and modify this package as you please.