React Swing Component

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

Contents

• 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

• react functional component example (v.3.0.0 higher)
• react class component example (v. 2.0.1)

<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