react-with-animation - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

dist/bundle.js

@@ -88,3 +88,4 @@ 'use strict';
 
-                var classes = (className ? className : '') + ' ' + (isAnimating && animationClasses ? animationClasses : '');
+                var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
+
                 var componentProps = _extends({}, this.props, {
@@ -91,0 +92,0 @@ style: _extends({}, style, {

dist/module.js

@@ -84,3 +84,4 @@ import PropTypes from 'prop-types';
 
-                var classes = (className ? className : '') + ' ' + (isAnimating && animationClasses ? animationClasses : '');
+                var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
+
                 var componentProps = _extends({}, this.props, {
@@ -87,0 +88,0 @@ style: _extends({}, style, {

package.json

 {
   "name": "react-with-animation",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "A higher-order-component (HOC) to manage short-lived CSS animations in react",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

README.md

 # react-with-animation
 
-A higher-order-component (HOC) to manage short-lived CSS animations in react
+A higher-order-component (HOC) to manage short-lived CSS animations in React
+## Concept
+Let's say you want to temporarily add a CSS class to a React component to play a little animation, and when the animation's finished, remove the class. Sounds like a simple enough thing to do, right? We've been doing that for years in jQuery:
+```
+$('#myThing').addClass('animateMe').delay(3000).removeClass('animateMe');
+```
+In React, the `$('#myThing')`selector part is a bit different. Because React is declarative in nature, we need  a component that can handle imperatively telling React which component we want to add (and remove) the CSS classes to. That's what this HOC does - it 'wraps' your component so that it always knows where it is in the React DOM, and can apply and remove the animation when it's done.
+```JSX
+const AnimateMyComponent = withAnimation(MyComponent);
+render() {
+   return <AnimateMyComponent animationClasses="animateMe" animationDuration={3000} />
+}
+```
+<img src="https://github.com/lucastobrazil/react-with-animation-example/blob/master/src/example-withAnimation.gif" />
+
+There are plenty of ways to do this, but this HOC offers a simple, unified way to integrate such animations into your already-existing components, without needing to add change them or add all the boilerplate code each time.
+
+## Installation
+```
+npm i react-with-animation --save
+```
+## Example
+Check out a working example [here](https://github.com/lucastobrazil/react-with-animation-example) or take a quick squiz at the code example below.
+
+1. Set up your CSS Animation
+```CSS
+.animateMe {
+   animation-name: slideAndFadeIn; 
+}
+
+@keyframes slideAndFadeIn {
+   0% {
+      transform: translateX(-10px);
+      opacity: 0;
+   }
+   100% {
+      transform: translateX(0);
+      opacity: 1;
+   }   
+}
+```
+
+2. Then in React, 
+```JSX
+const MyComponent = ({ className, style }) => <div className={className} style={style}>Yay</div>;
+const AnimateMyComponent = withAnimation(MyComponent);
+render() {
+   return <AnimateMyComponent animationClasses="animateMe" animationDuration={3000} animateOnFirstRender={true} />
+}
+```
+3. On render, `<MyComponent />` will have the CSS class `animateMe` for 3000ms, then once the animation is completed, the class will be removed!
+
+## API / Props
+The wrapper HOC takes the following props. These are considered to be the basic configuration
+
+| Prop     	| Type          	| Optional? 	| Default 	|
+|----------	|---------------	|-----------	|---------	|
+| animationClasses 	| `string`  	| no     	| '' |
+| animateOnFirstRender 	| `boolean`      	| yes       	| false |
+| animationDuration 	| `number`(ms) 	| yes        	| 3000 |
+
+It is important to note that the *wrappee* (ie the component that will have the animation applied to it) *must* pass these props:
+
+| Prop     	| What is applied          	|
+|----------	|---------------	|
+| className 	| `animationClasses` + any other classes you place on the component |
+| style 	| `animationDuration` + any other styles you place on the component |
+
+## Methods
+`startAnimation()` Will 'play' the animation again.
+You will need to set a `ref` and you can call `ref.startAnimation();`
+
+```JSX
+const MyComponent = ({ className, style }) => <div className={className} style={style}>Yay</div>;
+const AnimateMyComponent = withAnimation(MyComponent);
+
+class Animated extends React.Component {
+   start = () => {
+      this.animatedComponentRef.startAnimation();
+   };
+   render() {
+      return (
+         <div>
+            <AnimateMyComponent animationClasses="animateMe" ref={el => this.animatedComponentRef = el } />
+
+            // Click the button and call the start() method of this class
+            <Button onClick={this.start}>Play</Button>
+         </div>
+      );
+   }
+}
+```
+
+## Gotchas
+1. You should *not* set `animation-duration` in CSS - this is handled via the `animationDuration` prop set in your wrapped component.
+
+2. You need to wrap the actual component/element that will have the css animation applied to it. If you want some `<Text />` inside a div to be animated, wrap the `<Text />` component in the HOC, not the parent.
+
+## License
+
+Released under the [MIT license](https://opensource.org/licenses/MIT).
+
+## Contribute
+
+Please let me know if you have any feedback. Fork the repo, create Pull Requests and Issues. Have a look into [how to contribute](/CONTRIBUTE.md).

src/withAnimation.js

@@ -53,3 +53,7 @@ import PropTypes from 'prop-types';
             const { animationClasses, animationDuration, children, wrappedRef, className, style } = this.props;
-            const classes = `${className ? className : ''} ${isAnimating && animationClasses ? animationClasses : ''}`;
+            const classes = []
+                .concat(className ? [className] : [])
+                .concat(isAnimating && animationClasses ? [animationClasses] : [])
+                .join(' ');
+
             const componentProps = {
@@ -56,0 +60,0 @@ ...this.props,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23141

increased by27.84%

Number of package files

10

increased by11.11%

Lines of code

342

increased by0.88%

Number of lines in readme file

108

increased by2600%

No dependency changes