use-keyframes

Custom hook to simulate some basic use of the `@keyframes` on the CSS, but using only inline-style and JS

Install

With npm

npm install --save use-keyframes

or using yarn

yarn add use-keyframes

Usage

import React, { Component } from 'react'

import useKeyframes from 'use-keyframes'

function App() {
  const [opacity, timeInSeconds] = useKeyframes<number>({
    initialValue: 1,
    toValue: 0,
    timeInSeconds: 0.75
  })
  const style: React.CSSProperties = {
    width: 100,
    height: 100,
    background: 'gray',
    marginTop: '10px',
    marginLeft: '10px',
    float: 'left',
    opacity,
    position: 'relative',
    transition: `opacity ${timeInSeconds}s linear`
  }
  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        background: 'black',
        overflow: 'hidden'
      }}
    >
      <View style={style} />
      <View style={style} />
      <View style={style} />
      <View style={style} />
    </View>
  )
}

Or you can check on the sandbox example here

License

MIT © pdrmdrs