https://github.com/fredericheem/react-leanimate

Animate react components under 600B
https://github.com/fredericheem/react-leanimate

animation react react-component

Last synced: 8 days ago
JSON representation

Animate react components under 600B

• Host: GitHub
• URL: https://github.com/fredericheem/react-leanimate
• Owner: FredericHeem
• Created: 2018-03-04T17:51:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-09-01T20:49:36.000Z (about 5 years ago)
• Last Synced: 2024-10-18T15:56:08.251Z (about 1 month ago)
• Topics: animation, react, react-component
• Language: JavaScript
• Homepage: https://fredericheem.github.io/react-leanimate/
• Size: 638 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-leanimate  [![npm version](https://badge.fury.io/js/react-leanimate.svg)](https://badge.fury.io/js/react-leanimate)

Animate your react application with lightweight components.  

Checkout the [demo page](https://fredericheem.github.io/react-leanimate/) which is worth more than a thousand words.

## Aminate component ![](http://img.badgesize.io/fredericheem/react-leanimate/master/src/Animate.js.svg?compression=gzip)

The problem with animating a react component is simple, you cannot animate a component that has been removed from the DOM. 

The solution is to wrap a component, intercept the unmount lifecycle, clone the underlying DOM node and then apply the desired CSS animation. 

Here is a basic example of how to use the *Animate* component:

```jsx

import React, { Component } from "react";

import Animate from "react-leanimate/Animate";

class Toggler extends Component {

  state = {

    show: true

  };

  render() {

    const { state } = this;

    return (

      


         this.setState({ show: !state.show })}>

          Toggle

        

        


          {state.show && (

            Hello World}

              animationHide={"hide-right 1s"}

              animationShow={"show-left 1s"}

            />

          )}

        

      

    );

  }

}


```

[![Edit react-leanimate example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rj3m0jq3o4)

## Smooth component ![](http://img.badgesize.io/fredericheem/react-leanimate/master/src/Smooth.js.svg?compression=gzip)

When a child component is added or removed, the parent node will have its width or height changed. Use the *Smooth* component to animate this transition.

Example:

```jsx

import React, { Component } from "react";

import Smooth from "react-leanimate/Smooth";

class ShowDetails extends Component {

  state = {

    show: false

  };

  render() {

    const { state } = this;

    return (

      

         this.setState({ show: !state.show })}>

          Show Details

        

        


          {state.show && 
Details here
}

        

      

    );

  }

}

```


[![Edit react-leanimate ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3vx4l4qlxp)

## Installing this library

The library is published under the *react-leanimate* name

    $ npm i react-leanimate

## Building this library

[microbundle](https://github.com/developit/microbundle) is the underlying tool to produce size efficient bundles.

```sh

$ npm run build:lib

> microbundle -i src/Animate.js -i src/Smooth.js --external all --jsx React.createElement

Build output to dist:

        609 B: Animate.js

        575 B: Animate.m.js

        673 B: Animate.umd.js

        718 B: Smooth.js

        684 B: Smooth.m.js

        782 B: Smooth.umd.js

 ```

## Modifying this library

Start a development server using:

    $ npm run build

You can also develop with [storybook](https://github.com/storybooks/storybook)

    $ npm run storybook