retilt/src/story.js

``` ______ __ __ ______ /\__ _\ /\ \ /\ \ /\__ _\ \/_/\ \/ \ \ \ \ \ \____ \/_/\ \/ \ \_\ \ \_\ \ \_____\ \ \_\ \/_/ \/_/ \/_____/ \/_/ ```

'use strict'

import { storiesOf } from '@kadira/storybook'
import React from 'react'
import Tilt from './index'

const styles = {
  flex: {
    alignItems: 'center',
    display: 'flex',
    height: '100vh',
    justifyContent: 'center',
    width: '100%'
  },
  main: {
    alignItems: 'center',
    background: '#ddd',
    display: 'flex',
    height: '200px',
    justifyContent: 'center',
    width: '200px'
  },
  margin: {
    marginTop: '300px'
  }
}

storiesOf('Tilt', module)
  .add('Default Tilt - Without props', () => (
    <div>
      <div style={styles.flex}>
        <Tilt>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))

storiesOf('Tilt - perspective', module)
  .add('Perspective 100', () => (
    <div>
      <div style={styles.flex}>
        <Tilt perspective={100}>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))
  .add('Perspective 300 (default)', () => (
    <div>
      <div style={styles.flex}>
        <Tilt perspective={300}>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))
  .add('Perspective 1000', () => (
    <div>
      <div style={styles.flex}>
        <Tilt perspective={1000}>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))

storiesOf('Tilt - Keep tilt position', module)
  .add('keepTilt false', () => (
    <div>
      <div style={styles.flex}>
        <Tilt perspective={100} keepTilt={false}>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))
  .add('keepTilt true', () => (
    <div>
      <div style={styles.flex}>
        <Tilt perspective={100} keepTilt={true}>
          <div style={styles.main}>Tilt</div>
        </Tilt>
      </div>
    </div>
  ))