components using react & react-motion
npm install --save react-motion-componentsimport 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 (
<div>
<h1>Carousel</h1>
<button onClick={this.prev}>prev</button>
<button onClick={this.next}>next</button>
{Array.from({ length: this.state.size }, (x, i) => {
return (
<button
key={i}
onClick={() => {
this.move(i);
}}
>
move {i}
</button>
);
})}
<div
style={{
...defaultStyle
}}
>
<Carousel
{...defaultStyle}
direction={'horizontal'}
effect={this.state.effect}
index={this.state.index}
onClick={() => {}}
onChange={index => {
this.move(index);
}}
>
{Array.from({ length: this.state.size }, (x, i) => {
return (
<div
key={i}
style={{
...defaultStyle,
...itemStyle,
background: this.state.colors[i]
}}
>
{i}
</div>
);
})}
</Carousel>
</div>
</div>
);
}
}import React, { Component } from 'react';
import { Cube } from 'react-motion-components';
class App extends Component {
render() {
const defaultStyle = {
width: 300,
height: 300
};
return (
<div>
<h1>Cube</h1>
<div
style={{
...defaultStyle
}}
>
<Cube size={300} index="front" />
</div>
</div>
);
}
}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 (
<div>
<h1>DraggableList</h1>
<DraggableList {...defaultStyle} rowSize={2}>
<div style={{ ...defaultStyle, ...itemStyle, background: 'green' }}>
1
</div>
<div style={{ ...defaultStyle, ...itemStyle, background: 'blue' }}>
2
</div>
<div style={{ ...defaultStyle, ...itemStyle, background: 'red' }}>
3
</div>
<div style={{ ...defaultStyle, ...itemStyle, background: 'yellow' }}>
4
</div>
</DraggableList>
</div>
);
}
}import React, { Component } from 'react';
import { StaggeredList } from 'react-motion-components';
class App extends Component {
render() {
const defaultStyle = {
width: 200,
height: 200
};
return (
<div>
<h1>StaggeredList</h1>
<div
style={{
...defaultStyle
}}
>
<StaggeredList>
<div style={{ ...defaultStyle, background: 'green' }} />
<div style={{ ...defaultStyle, background: 'red' }} />
<div style={{ ...defaultStyle, background: 'blue' }} />
</StaggeredList>
</div>
</div>
);
}
}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 (
<div
style={{
textAlign: 'center'
}}
>
<div>
<button
onClick={() => {
this.setState({
window1: {
isOpen: true
}
});
}}
>
add window1
</button>
</div>
<div>
<button
onClick={() => {
this.setState({
window1: {
isOpen: false
}
});
}}
>
remove window1
</button>
</div>
<Window
width={300}
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 (
<Segment
clearing
attached="top"
style={{
width,
height,
boxSizing: 'border-box'
}}
onDoubleClick={toggleWindowSize}
onMouseDown={handleMouseDown}
>
<Header as="h4" floated="left">
Test
</Header>
<Header as="h4" floated="right">
<Icon
link
color={`${isFulling ? 'green' : 'yellow'}`}
name={`toggle ${isFulling ? 'on' : 'off'}`}
onClick={toggleWindowSize}
/>
<Icon
link
name="close"
color="red"
onClick={removeWindow}
/>
</Header>
</Segment>
);
}
}}
resize={true}
open={this.state.window1.isOpen}
onClose={() => {
this.setState({
window1: {
isOpen: false
}
});
}}
>
<Segment
attached
style={{
width: '100%',
height: '100%',
boxSizing: 'border-box'
}}
>
test1
</Segment>
</Window>
</div>
);
}
}MIT © pjb0811