React Swing Component
react-swing is a React component for implementing swing easily with React. (Examples: http://ssanjun.github.io/examples/react-swing)
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 |
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. |
Component Event Props Example
Using 'event name' set Swing Props and passing parameter as function more details
<Swing className="stack" tagName="div" setStack= this ref="stack" throwout= console> /* children elements is will be Card */ <div className="card clubs" ref="card1" throwout= console> ♣ </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 { this; } ... // render { return data && { if thisstatemounted const Swing = default; return <Swing setStack=thisstack = stack> datalist </Swing> ; } }
lazy-loading 'react-swing' component. it will be work.