react-motion-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.3 • Public • Published

    react-motion-components

    components using react & react-motion

    NPM JavaScript Style Guide

    Install

    npm install --save react-motion-components

    Usage

    Carousel

    demo

    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 (
          <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>
        );
      }
    }

    Cube

    demo

    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>
        );
      }
    }

    DraggableList

    demo

    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>
        );
      }
    }

    StaggeredList

    demo

    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>
        );
      }
    }

    Window

    demo

    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>
        );
      }
    }

    License

    MIT © pjb0811

    Install

    npm i react-motion-components

    DownloadsWeekly Downloads

    8

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    754 kB

    Total Files

    28

    Last publish

    Collaborators

    • jbpark