react-motion-components
components using react & react-motion
Install
npm install --save react-motion-components
Usage
Carousel
import React Component from 'react';import Carousel from 'react-motion-components'; state = index: 0 size: 5 effect: '3d' colors: 'green' 'red' 'blue' 'yellow' 'black' ; { const index size effect = thisstate; this; }; { const index size effect = thisstate; this; }; { this; }; { const defaultStyle = width: 300 height: 300 margin: '0 auto' overflow: 'hidden' ; const itemStyle = display: 'flex' justifyContent: 'center' alignItems: 'center' fontSize: 30 fontWeight: 'bold' color: 'white' ; return <div> <h1>Carousel</h1> <button =>prev</button> <button =>next</button> Array <div = > <Carousel = = = = = > Array </Carousel> </div> </div> ; }
Cube
import React Component from 'react';import Cube from 'react-motion-components'; { const defaultStyle = width: 300 height: 300 ; return <div> <h1>Cube</h1> <div = > <Cube = ="front" /> </div> </div> ; }
DraggableList
import React Component from 'react';import DraggableList from 'react-motion-components'; { const defaultStyle = width: 300 height: 300 ; const itemStyle = display: 'flex' justifyContent: 'center' alignItems: 'center' fontSize: 30 fontWeight: 'bold' color: 'white' ; return <div> <h1>DraggableList</h1> <DraggableList => <div => 1 </div> <div => 2 </div> <div => 3 </div> <div => 4 </div> </DraggableList> </div> ; }
StaggeredList
import React Component from 'react';import StaggeredList from 'react-motion-components'; { const defaultStyle = width: 200 height: 200 ; return <div> <h1>StaggeredList</h1> <div = > <StaggeredList> <div = /> <div = /> <div = /> </StaggeredList> </div> </div> ; }
Window
import React Component from 'react';import Header Segment Icon from 'semantic-ui-react';import 'semantic-ui-css/semantic.min.css';import Window from 'react-motion-components'; state = window1: isOpen: true ; { return <div = > <div> <button = > add window1 </button> </div> <div> <button = > remove window1 </button> </div> <Window = = = = ="top" ="top" =} = = = > <Segment = > test1 </Segment> </Window> </div> ; }
License
MIT © pjb0811