React Swing Component

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

Usage Examples
Component Props
Component Event Props
- Component Event Props Example
Troubleshooting

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

ssanjun/react-swing