How to install the package for react app???

[Nikoobox]

Please include a simple line explaining how to npm install the package properly. It is not obvious for some programmers, especially for beginners

[ivandez]

Doc has to be improve, here my guide for install react'animations with Radium in React app

1. First install Radium with npm install --save --force radium you have to use --force because radium is a deprecated package

2. Then import all the packages as you see in react-animation doc:

import { bounce } from 'react-animations';
import Radium, {StyleRoot} from 'radium';

3. After that write your animation propeties (see react-animation doc for all propeties):

const styles = {
  bounce: {
    animation: 'x 1s',
    animationName: Radium.keyframes(bounce, 'bounce')
  }
}

4. wrap the html element you want to animate with StyleRoot tag this is an example of a real project i am working:

<StyleRoot>
    <div className={open ? "block" : "hidden"} >{childrenToHide}</div>
</StyleRoot>

5. finally add to the element you want to animate style attribute with the style object propety you write in step 3 style={styles.bounce}

Final code should look like this

import React, { useState } from "react";

import { bounce } from "react-animations";
import Radium, { StyleRoot } from "radium";

const Container = (props) => {
  const [open, setIsOpen] = useState(false);

  const styles = {
    bounce: {
      animation: "x 1s",
      animationName: Radium.keyframes(bounce, "bounce"),
    },
  };

  return (
    <StyleRoot>
      <div className={open ? "block" : "hidden"} style={styles.bounce}>
        <h1>{props.name}</h1>
      </div>
    </StyleRoot>
  );
};

[KodeSage]

Hello @Nikoobox

use the command below to install the react-animation package using npm

npm install --save react-animation

if you are using styled components for styling in your react app, add the following code below

import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';

const bounceAnimation = keyframes`${bounce}`;

const BouncyDiv = styled.div`
  animation: 1s ${bounceAnimation};
`;

you are free to make changes/switch to whichever animation you want

Below is a list of all available animations in react-animation

bounceOut

bounce

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flash

flip

flipInX

flipInY

flipOutX

flipOutY

headShake

hinge

jello

lightSpeedIn

lightSpeedOut

pulse

rollIn

rollOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

rubberBand

shake

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

swing

tada

wobble

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

[KodeSage]

If by any chance you are using version 16.8 and above of reactjs, you should use the command below to force install

npm install --save --force react-animation