A React component for implementing swing easily with React

React Swing Component

react-swing is a React component for implementing swing easily with React.

React Version Compatibility

< 15.3 React

This package is compatible with React 15.3.0 and lower.

npm install --save react-swing@0.0.9

>= 15.3 React < 16.0

This package is compatible with React 15.3.0 and higher and React 16.0.0 lower

npm install --save react-swing@^1.0.0

>= 16.0 React

This package is compatible with React 16.0.0 and higher

npm install --save react-swing@^2.0.0

Component Props

Component Event Props

more information

Component Event Props Example

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

<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.

GitHub