react-spring: Render-props api

import { Spring, animated } from 'react-spring/renderprops'

const LOREM = `Hello world`

export default class App extends React.Component {
  state = { toggle: true, text: [LOREM] }
  onToggle = () => this.setState(state => ({ toggle: !state.toggle }))
  onAddText = () =>
    this.setState(state => ({ toggle: true, text: [...state.text, LOREM] }))
  onRemoveText = () =>
    this.setState(state => ({ toggle: true, text: state.text.slice(1) }))
  render() {
    const { toggle, text } = this.state
    return (
      <div className="auto-main">
        <button onClick={this.onToggle}>Toggle</button>
        <button onClick={this.onAddText}>Add text</button>
        <button onClick={this.onRemoveText}>Remove text</button>
        <div className="content">
          <Spring
            native
            force
            config={{ tension: 2000, friction: 100, precision: 1 }}
            from={{ height: toggle ? 0 : 'auto' }}
            to={{ height: toggle ? 'auto' : 0 }}
          >
            {props => (
              <animated.div className="item" style={props}>
                {text.map((t, i) => (
                  <p key={i}>{t}</p>
                ))}
              </animated.div>
            )}
          </Spring>
        </div>
      </div>
    )
  }
}

import { Trail, animated } from 'react-spring/renderprops'

export default class TrailsExample extends React.PureComponent {
  state = {
    toggle: true,
    items: ['item1', 'item2', 'item3', 'item4', 'item5'],
  }
  toggle = () =>
    this.setState(state => ({
      toggle: !state.toggle,
    }))
  render() {
    const { toggle, items } = this.state
    return (
      <div
        style={{
          backgroundColor: '#247BA0',
          position: 'relative',
          width: '100%',
          height: '100%',
        }}
      >
        <Trail
          native
          reverse={toggle}
          initial={null}
          items={items}
          from={{ opacity: 0, x: -100 }}
          to={{ opacity: toggle ? 1 : 0.25, x: toggle ? 0 : 100 }}
        >
          {item => ({ x, opacity }) => (
            <animated.div
              className="box"
              onClick={this.toggle}
              style={{
                opacity,
                transform: x.interpolate(x => `translate3d(${x}%,0,0)`),
              }}
            />
          )}
        </Trail>
      </div>
    )
  }
}

/** css */
.box {
  cursor: pointer;
  position: relative;
  width: 50%;
  height: 20%;
  background-color: #f3ffbd;
  will-change: transform;
}

import React from 'react'
import { Transition, animated } from 'react-spring/renderprops'
import './styles.css'

export default class App extends React.PureComponent {
  state = { show: true }
  toggle = e => this.setState(state => ({ show: !state.show }))
  render() {
    return (
      <div className="reveals-main" onClick={this.toggle}>
        <Transition
          native
          items={this.state.show}
          from={{ position: 'absolute', overflow: 'hidden', height: 0 }}
          enter={[{ height: 'auto' }]}
          leave={{ height: 0 }}
        >
          {show =>
            show && (props => <animated.div style={props}>hello</animated.div>)
          }
        </Transition>
      </div>
    )
  }
}

/** css */
.reveals-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.reveals-main > div {
  font-weight: 800;
  font-size: 4em;
  will-change: transform, opacity;
  overflow: hidden;
}

<Transition
  native
  items={this.state.show}
  from={{ position: 'absolute', overflow: 'hidden', height: 0 }}
  enter={[{ height: 'auto' }]}
  leave={{ height: 0 }}
>
  {show => show && (props => <animated.div style={props}>hello</animated.div>)}
</Transition>

import { Keyframes, animated, config } from 'react-spring/renderprops'
// import delay from 'delay'

const Content = Keyframes.Spring(async next => {
  // None of this will cause React to render, the component renders only once :-)
  while (true) {
    await next({
      from: { opacity: 0, width: 50, height: 50, background: 'black' },
      opacity: 1,
      width: 80,
      height: 80,
      background: 'tomato',
    })
    await next({
      from: { left: '0%' },
      left: '70%',
      background: 'seagreen',
    })
    next({
      from: { top: '0%' },
      top: '40%',
      background: 'plum',
      config: config.wobbly,
    })
    // await delay(2000) // don't wait for the animation above to finish, go to the next one in 2s
    await next({ left: '0%', background: 'hotpink' })
    await next({
      top: '0%',
      background: 'teal',
    })
    await next({
      opacity: 0,
      width: 40,
      height: 40,
      background: 'black',
    })
  }
})

export default class App extends React.Component {
  render() {
    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          overflow: 'hidden',
          background: 'aquamarine',
          padding: 10,
        }}
      >
        <Content native>
          {props => (
            <animated.div
              style={{ position: 'relative', borderRadius: '50%', ...props }}
            />
          )}
        </Content>
      </div>
    )
  }
}