https://github.com/drylikov/react_keyframes

A React component for creating frame-based animations.
https://github.com/drylikov/react_keyframes

Last synced: 8 days ago
JSON representation

A React component for creating frame-based animations.

• Host: GitHub
• URL: https://github.com/drylikov/react_keyframes
• Owner: drylikov
• License: mit
• Created: 2024-06-14T21:05:27.000Z (5 months ago)
• Default Branch: drylikov
• Last Pushed: 2024-06-14T21:11:29.000Z (5 months ago)
• Last Synced: 2024-06-14T22:28:58.209Z (5 months ago)
• Language: TypeScript
• Size: 151 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Keyframes

A React component for creating frame-based animations.

![Demo](https://cloud.githubusercontent.com/assets/775227/14613178/24789406-05d6-11e6-8411-6ee929ae3f3e.gif)

## Example

The following example will render contents in `Frame` one at a time every 500 ms.

```js

import { Keyframes, Frame } from "react-keyframes";

function MyComponent() {

  return (

    

      This

      This is

      

        This is animated.

      

    

  );

}

```

## Usage

Firstly, install the package:

```js

$ npm install --save react-keyframes

```

## API

### Keyframes

**``**

- Use `import { Keyframes } from 'react-keyframes'`

- The `component` prop specifies what component `Keyframes` renders as. You can pass the following:

  - a React Component (i.e. ``)

  - a React Fragment (i.e. ``)

  - an HTML tag represented as a string (i.e. ``)

  - If nothing is passed, it defaults to "span"

- Any additional, user-defined properties will become properties of the rendered component.

- It must have only `Frame` as children.

- Example:

```js

import { Component } from 'react';

import { Keyframes, Frame } from 'react-keyframes';

class extends Component {

  render () {

    return 

      foo

      bar

    ;

  }

}

```

### Frame

**``**

- Use `import { Frame } from 'react-keyframes'`

- The `duration` prop specifies the length of time that a frame should show (millisecond).

- You have to put `Frame` in the order you want them animated.

- Example:

```js

import { Component } from 'react';

import { Keyframes, Frame } from 'react-keyframes';

class extends Component {

  render () {

    return 

      foo

      bar

    ;

  }

}

```

## Contributing

- Run `npm run build` to transpile the source code

- Before submitting a PR, please run `npm run test`

- Please [be welcoming](http://contributor-covenant.org/)