components using react & react-motion
npm install react-motion-components> components using react & react-motion
 
``bash`
npm install --save react-motion-components
`jsx
import React, { Component } from 'react';
import { Carousel } from 'react-motion-components';
export default class CarouselSample extends Component {
state = {
index: 0,
size: 5,
effect: '3d',
colors: ['green', 'red', 'blue', 'yellow', 'black']
};
prev = () => {
const { index, size, effect } = this.state;
this.setState({
index: effect === '2d' ? (index > 0 ? index - 1 : size - 1) : index - 1
});
};
next = () => {
const { index, size, effect } = this.state;
this.setState({
index: effect === '2d' ? (index < size - 1 ? index + 1 : 0) : index + 1
});
};
move = index => {
this.setState({
index
});
};
render() {
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 (
$3
jsx
import React, { Component } from 'react';
import { Cube } from 'react-motion-components';class App extends Component {
render() {
const defaultStyle = {
width: 300,
height: 300
};
return (
Cube
...defaultStyle
}}
>
$3
jsx
import React, { Component } from 'react';
import { DraggableList } from 'react-motion-components';class App extends Component {
render() {
const defaultStyle = {
width: 300,
height: 300
};
const itemStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: 30,
fontWeight: 'bold',
color: 'white'
};
return (
DraggableList
1
2
3
4
);
}
}
`$3
jsx
import React, { Component } from 'react';
import { StaggeredList } from 'react-motion-components';class App extends Component {
render() {
const defaultStyle = {
width: 200,
height: 200
};
return (
StaggeredList
...defaultStyle
}}
>
$3
jsx
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';class App extends Component {
state = {
window1: {
isOpen: true
}
};
render() {
return (
textAlign: 'center'
}}
>
this.setState({
window1: {
isOpen: true
}
});
}}
>
add window1
this.setState({
window1: {
isOpen: false
}
});
}}
>
remove window1
height={300}
minWidth={300}
minHeight={300}
position="top"
direction="top"
titlebar={{
use: true,
height: 50,
component: props => {
const {
width,
height,
toggleWindowSize,
handleMouseDown,
removeWindow,
isFulling
} = props; return (
attached="top"
style={{
width,
height,
boxSizing: 'border-box'
}}
onDoubleClick={toggleWindowSize}
onMouseDown={handleMouseDown}
>
Test
color={
${isFulling ? 'green' : 'yellow'}}
name={toggle ${isFulling ? 'on' : 'off'}}
onClick={toggleWindowSize}
/>
name="close"
color="red"
onClick={removeWindow}
/>
);
}
}}
resize={true}
open={this.state.window1.isOpen}
onClose={() => {
this.setState({
window1: {
isOpen: false
}
});
}}
>
style={{
width: '100%',
height: '100%',
boxSizing: 'border-box'
}}
>
test1
MIT © pjb0811