Skip to content

Instantly share code, notes, and snippets.

@alexvcasillas
Created August 28, 2017 12:10
Show Gist options
  • Save alexvcasillas/c489c11a15358261396ff6d4f170e2b1 to your computer and use it in GitHub Desktop.
Save alexvcasillas/c489c11a15358261396ff6d4f170e2b1 to your computer and use it in GitHub Desktop.
Exported-Component
import React from 'react';
import styled from 'styled-components';
import * as Animations from './animations';
const Wrapper = styled.div`
pointer-events: none;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10000;
animation-duration: ${({ duration }) => (duration ? `${duration}s` : '1s')};
animation-name: ${({ animation }) =>
animation ? Animations[animation] : Animations['FadeIn']};
animation-iteration-count: ${({ iteration }) =>
iteration ? iteration : '1'};
`;
const Animated = ({ children, duration, animation, iteration }) =>
<Wrapper animation={animation} duration={duration} iteration={iteration}>
{children}
</Wrapper>;
export default Animated;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment