https://github.com/huozhi/react-jsx-style

React library to render CSS dynamic with JSX component or hooks
https://github.com/huozhi/react-jsx-style

animation animation-css css-in-js css-in-react dynamic-css hooks-api styling

Last synced: 20 days ago
JSON representation

React library to render CSS dynamic with JSX component or hooks

• Host: GitHub
• URL: https://github.com/huozhi/react-jsx-style
• Owner: huozhi
• Created: 2020-02-19T16:42:03.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:15:20.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T10:41:04.638Z (about 1 month ago)
• Topics: animation, animation-css, css-in-js, css-in-react, dynamic-css, hooks-api, styling
• Language: TypeScript
• Homepage:
• Size: 755 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React JSX Style

> create dynamic injected styles with react component or hooks

## Installation

```sh

npm install -S react-jsx-style

```

## Usage

### Animation

```js

import {Keyframe} from 'react-jsx-style'

// Using react component - Keyframe, Keyframe.Block + 

// Scale animation

function AnimatedBlock() {

  return (

    <div

      style={{

        textAlign: 'center',

        width: 200,

        animation: 'scale_2 3000ms infinite',

        transformOrigin: 'center',

      }}

    >

      <h3>scale</h3>

      <style>

        <Keyframe identity={'scale_2'}>

          <Keyframe.Block selector={'from'} value={{WebkitTransform: 'scale(1)'}} />

          <Keyframe.Block selector={'to'} value={{WebkitTransform: 'scale(2)'}} />

        </Keyframe>

      

    

  )

}

// Using hooks - useKeyframe

// Rotate animation

function HookAnimationBlock() {

  return (

    


      


        Rotate

      

    

  )

}


```

## License

[MIT](https://github.com/reduxjs/react-redux/blob/master/LICENSE.md)