Skip to content

Instantly share code, notes, and snippets.

@jide
Created December 22, 2016 10:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jide/5e8da60fab11b5f5498dd8b84f59773a to your computer and use it in GitHub Desktop.
Save jide/5e8da60fab11b5f5498dd8b84f59773a to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import styled from 'styled-components';
import { Motion, spring } from 'react-motion';
const Title = styled.h1`
font-size: 3.5em;
text-align: center;
transform: var(--transform);
color: var(--color, palevioletred);
`;
const SubTitle = styled(Title)`
font-size: 1.5em;
`;
const Button = styled.button`
font-size: 1.4em;
background: none;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
outline: none;
position: relative;
z-index: 10;
color: var(--color, palevioletred);
border: 2px solid var(--color, palevioletred);
`;
const CSSVariables = styled.div`
--color: ${props => props.color};
--transform: ${props => `translate3d(0, ${props.y}em, 0)`};
`;
export default class App extends Component {
state = {
color: 'palevioletred',
open: false
}
handleClick = () => {
this.setState({
color: this.state.color === 'lightgray' ? 'palevioletred' : 'lightgray',
open: !this.state.open
});
}
render() {
return (
<Motion defaultStyle={{ y: 0 }} style={{ y: spring(this.state.open ? 5 : 0) }}>
{ ({ y }) => (
<CSSVariables color={ this.state.color } y={ y }>
<div>
<Title>
Hello world
</Title>
<SubTitle>
CSS Variables !
</SubTitle>
<Button onClick={ this.handleClick }>Click me</Button>
</div>
</CSSVariables>
) }
</Motion>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment