react-swing v3.0.0

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

Component Event Props

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