Feature/export BaseAnimation

README.md

@@ -65,6 +65,40 @@ Example:
 
 See all examples [here](https://dielduarte.github.io/animate-css-styled-components/)
 
+## How to create custom styled animations
+
+You can import BaseAnimation component and create your custom animation
+
+Example:
+
+```
+  import { BaseAnimation } from 'animate-css-styled-components';
+
+  //create your custom animation
+  const SlideOutDownAnimation = keyframes`
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      visibility: hidden;
+      transform: translate3d(0, 100%, 0);
+    }
+  `;
+
+  //extend BaseAnimation component and create 
+  //your custom styled animation
+  const SlideOutDown = styled(BaseAnimation)`
+    animation-name: ${SlideOutDownAnimation};
+  `;
+
+  //export your custom styled animation  
+  export default SlideOutDown;
+```
+
+now your animation is a styled-component and you can use this like any other styled-component, 
+passing the all BaseAnimation [props](https://github.com/dielduarte/animate-css-styled-components#props).
+
 # WIP
  - tests with jest
  - `animate` component, wrapper for all animations with a only component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animate-css-styled-components",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "port of animate.css for styled-components",
   "main": "./lib/index.js",
   "scripts": {

src/index.js

@@ -1,3 +1,4 @@
+import BaseAnimation from './BaseAnimation';
 import Flash from './Attention/Flash';
 import HeadShake from './Attention/HeadShake';
 import Jello from './Attention/Jello';
@@ -164,5 +165,6 @@ export {
   ZoomOutDown,
   ZoomOutLeft,
   ZoomOutRight,
-  ZoomOutUp
+  ZoomOutUp,
+  BaseAnimation
 };