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

    3.0.0 • Public • Published

    React Swing Component

    Travis build status NPM version

    react-swing is a React component for implementing swing easily with React. (Examples: http://ssanjun.github.io/examples/react-swing)

    Card stack example.

    Contents

    React Version Compatibility

    >= 16.8 React with hook

    This package is compatible with React 16.8 and higher.

    npm install --save react-swing@^3.0.0
    

    >= 16.3 React

    This package is compatible with React 16.3.0 and higher.

    npm install --save react-swing@^2.0.0
    

    >= 15.3 React < 16.0

    This package is compatible with React 15.3.0 up to React 16.0.0.

    npm install --save react-swing@^1.0.0
    

    < 15.3 React

    This package is compatible with React 15.3.0 and lower.

    npm install --save react-swing@0.0.9
    

    Component Props

    Name Description type Default isRequired support
    tagName Create tag element for stack. String div false deprecated 3.0.0
    config Swing.Stack configuration object. more information Object null false
    setStack Bind Swing.Stack instance to object. function - true

    Component Event Props

    Name Description
    throwout When card has been thrown out of the stack.
    throwoutend When card has been thrown out of the stack and the animation has ended.
    throwoutleft Shorthand for throwout event in the Card.DIRECTION_LEFT direction.
    throwoutright Shorthand for throwout event in the Card.DIRECTION_RIGHT direction.
    throwin When card has been thrown into the stack.
    throwinend When card has been thrown into the stack and the animation has ended.
    dragstart Hammer panstart.
    dragmove Hammer panmove.
    dragend Hammer panend.

    more information

    Component Event Props Example

    Using 'event name' set Swing Props and passing parameter as function more details

    <Swing
      className="stack"
      tagName="div"
      setStack={(stack) => this.setState({ stack: stack })}
      ref="stack"
      throwout={(e) => console.log('throwout', e)}
    >
      {/*
                children elements is will be Card
            */}
      <div className="card clubs" ref="card1" throwout={(e) => console.log('card throwout', e)}>
        ♣
      </div>
      <div className="card diamonds" ref="card2">
        ♦
      </div>
      <div className="card hearts" ref="card3">
        ♥
      </div>
      <div className="card spades" ref="card4">
        ♠
      </div>
    </Swing>

    Troubleshooting

    project/node_modules/hammerjs/hammer.js:2643 })(window, document, 'Hammer');

        /project/node_modules/hammerjs/hammer.js:2643
        })(window, document, 'Hammer');
           ^
    
        ReferenceError: window is not defined
            at Object.<anonymous> (/Users/ssanjun/Documents/project/quizz/node_modules/hammerjs/hammer.js:2643:4)
            at Module._compile (module.js:541:32)
            at Module._extensions..js (module.js:550:10)
            at Object.require.extensions.(anonymous function) [as .js] (/Users/ssanjun/Documents/project/quizz/node_modules/babel-register/lib/node.js:166:7)
            at Module.load (module.js:458:32)
            at tryModuleLoad (module.js:417:12)
            at Function.Module._load (module.js:409:3)
            at Module.require (module.js:468:17)
            at require (internal/module.js:20:19)
            at Object.<anonymous> (/Users/ssanjun/Documents/project/quizz/node_modules/swing/dist/card.js:19:17)
    

    it is react Server Side Rendering Problem of hammer.js in swing. check the this issue. it will be update.

    Solved

        ...
        // component Mounted
        componentDidMount() {
            this.setState({
                mounted: true
            });
        }
     
        ...
     
        // render
        render() {
            return (
                { data && (() => {
                        if (this.state.mounted) {
                            const Swing = require('react-swing').default;
                            return (
                                <Swing setStack={(stack)=>this.stack = stack}>
                                    { data.list.map((l) => <div>{l.a}</div>) }
                                </Swing>
                            );
                        }
                    })()
                }
            )
        }

    lazy-loading 'react-swing' component. it will be work.

    Thank you for

    https://github.com/gajus / https://github.com/gajus/swing

    Install

    npm i react-swing

    DownloadsWeekly Downloads

    100

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    25.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • ssanjun