Skip to content

Instantly share code, notes, and snippets.

View hpierre74's full-sized avatar
🥖

Pierre Huyghe hpierre74

🥖
18 followers · 60 following
View GitHub Profile
@hpierre74
hpierre74 / index.html
Last active January 17, 2017 12:54
3wa mod3 css test
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>ice</title>
</head>
<body>
<h1>!</h1>
</body>
</html>
@hpierre74
hpierre74 / styled-anim-basic.jsx
Last active August 5, 2018 22:09
styled-components / react-animations helper
import React from 'react';
import styled, { keyframes } from 'styled-components';
const AnimatedComponent = styled.div`
animation: 1.5s ${keyframes({ from: { width: '0%' }, to: { width: '100%' } })} linear;
`;
const YourComponent = () => <AnimatedComponent>I am animated</AnimatedComponent>;
@hpierre74
hpierre74 / styled-theme-anim.js
Created August 5, 2018 22:45
import { keyframes } from 'styled-components';
import slideInDown from 'react-animations/lib/slide-in-down';
export default {
fontFamily: 'Signika',
utils: {
// the duration is passed as parameter
slideInDown: duration => `animation: ${duration}s ${keyframes(slideInDown)};`,
},
colors: {
@hpierre74
hpierre74 / styled-theme-anim-consumer.jsx
Last active August 5, 2018 22:56
import React from 'react';
import styled from 'styled-components';
const AnimatedComponent = styled.div`
${ ({ theme: { utils } }) => utils.slideInDown(1.5) };
`;
const YourComponent = () => <AnimatedComponent>I am animated</AnimatedComponent>;
export default YourComponent;
@hpierre74
hpierre74 / styled-react-theme-anim-exports.js
Last active August 6, 2018 00:07
import styled from 'styled-components';
export const SlideInDownWrapper = styled.div`
${ ({ theme: { utils } }) => utils.slideInDown(1.5) };
`;
export const RotateInWrapper = styled.div`
${ ({ theme: { utils } }) => utils.rotateIn(1.5) };
`;
@hpierre74
hpierre74 / animation.utils.js
Last active August 7, 2018 18:26
// this function could be in the theme or anywhere you see fit
// eslint will complain about it, you might get errors if you
// use different webpacks bundles
export const requireAnimation = animation =>
require(`react-animations/lib/${animation}`).default;
@hpierre74
hpierre74 / withAnim.hoc.jsx
Last active August 7, 2018 18:48
import React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { requireAnimation } from 'YOUR_PATH';
const AnimationWrapper = styled.div`
animation: ${({ duration }) => duration}s ${({ animation }) => animation};
`;
const withAnim = Component => {
@hpierre74
hpierre74 / usin-withAnim-export.jsx
Last active August 8, 2018 23:24
import React from 'react';
import withAnim from './withAnim.hoc';
const App = () => (<div>I am animated</div>);
export default withAnim(App);
@hpierre74
hpierre74 / styled-anim-index.jsx
Created August 7, 2018 18:57
<App duration='3' animation='bounceIn' />
@hpierre74
hpierre74 / async-withAnim-import.jsx
Last active August 8, 2018 22:50
import React, { Component } from "react";
import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components";
const AnimationWrapper = styled.div`
animation: ${({ duration }) => duration}s ${({ animation }) => animation};
`;
const withAnim = ComponentToAnimate => {
class WithAnimHoc extends Component {