react-swing

react-swing is a React component for implementing swing


Keywords
react-component, react, swing, react-swing
License
MIT
Install
npm install react-swing@3.0.0

Documentation

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