{"size": 1053, "ext": "js", "max_stars_repo_path": "stories/tests/transitionhook.js", "max_stars_repo_name": "webhacking/react-spring", "max_stars_repo_stars_event_min_datetime": "2020-03-01T18:07:57.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-01T18:07:57.000Z", "max_issues_repo_path": "stories/tests/transitionhook.js", "max_issues_repo_name": "Jessidhia/react-spring", "max_issues_repo_issues_event_min_datetime": "2022-02-15T04:23:23.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T01:37:44.000Z", "max_forks_repo_path": "stories/tests/transitionhook.js", "max_forks_repo_name": "Jessidhia/react-spring", "max_forks_repo_forks_event_min_datetime": "2019-01-22T19:56:34.000Z", "max_forks_repo_forks_event_max_datetime": "2019-01-22T19:56:34.000Z"}
{"max_stars_count": 1, "max_issues_count": 4, "max_forks_count": 1, "avg_line_length": 27.7105263158, "max_line_length": 70, "alphanum_fraction": 0.5422602089}
import React, { useEffect, useState, Component } from 'react'
import { useTransition, animated } from '../../src/targets/web/hooks'
import { testStories } from '../index'
import shuffle from 'lodash/shuffle'
import './styles.css'

function TestTransition () {
  const [items, setState] = useState([])
  const transitions = useTransition({
    items,
    from: { opacity: 0, height: 0, transform: 'scale(1)' },
    enter: [{ opacity: 1, height: 50 }, { transform: 'scale(1.25)' }],
    leave: [
      { transform: 'scale(1)', opacity: 0.5 },
      { opacity: 0 },
      { height: 0 }
    ]
  })

  useEffect(() => {
    setState(['😅', '🚀', '🎉'])
    setTimeout(() => setState(['😅', '🎉']), 2500)
    setTimeout(() => setState(['😅', '✨', '🎉']), 5000)
  }, [])

  return (
      <div class='container'>
        {transitions.map(({ item, props, key }) => (
          <animated.div class='item' key={key} style={props}>
            {item}
          </animated.div>
        ))}
      </div>
  )
}

testStories.add('Transitions Hook', () => <TestTransition />)
