{"_id":"@cognimbus/react-nipple","name":"@cognimbus/react-nipple","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@cognimbus/react-nipple","version":"0.3.0","main":"lib/index.js","license":"MIT","scripts":{"clean":"rm -rf lib/*","eslint":"eslint src","docs":"esdoc","build":"babel src --out-dir lib --copy-files","build:watch":"yarn build --watch","build:full":"yarn clean && yarn eslint --fix && yarn docs && yarn build","prepublishOnly":"yarn build:full"},"peerDependencies":{"react":"17.0.2","react-dom":"17.0.2"},"dependencies":{"autobind-decorator":"2.4.0","classnames":"2.3.2","lodash.isequal":"4.5.0","nipplejs":"0.9.1"},"devDependencies":{"@loopmode/babel6-base":"0.3.5","react":"17.0.2"},"description":"A react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick.","_id":"@cognimbus/react-nipple@0.3.0","dist":{"shasum":"8152349ea9168c5364e87e279186ae5b1f3b43e0","integrity":"sha512-LvkHTmS8dWVfZf/7p9rUj0/2q0YjXRnaA0Ak1/ZXqC/fF/j3Sj7J4FwI6D+5pXwgPGH/NIM2IyUB/E+y3fv9QA==","tarball":"https://registry.npmjs.org/@cognimbus/react-nipple/-/react-nipple-0.3.0.tgz","fileCount":19,"unpackedSize":257587,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExgUPloRFV7p7zamp49x1a6FVJXbxQfiHmilMQcjDGmAiEAszmZyh4Unhyak5D+ydlA560em3a3NebEOw3NlThSLSI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj6cZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLeQ/+LfJ2h82bW/Lc0Ad70OyqgMaqQ6hXo3iu+zzgntvUr8ZT7K+H\r\nPxV1FRj1MBTfxZQ5Q9SzX89v2y4xcYMK3n6LKpW7JmrNQFYxSaxdQR6l3ap+\r\n7/jneEjAFE5t09rZWY/gHcovKE/hnB9zZtBU0ewg2uC65xAkyEWSfsdO4H/j\r\nlGa6r7lbkjW+kk8GiyAa8Zlrhb5kLFkh2aWz3pwWhGMmJPAcwlsg265hGnsd\r\nKLfD+PwWIJ7Z6+tUfcs9HdC80nCQTXmzyfEn2RHow50Ycun4DVu8+eSXCQ+Q\r\nPej9PuCGd89SDOsDBNZBkCbnXqe3V88uOM4vqM5qtNgTxVn1eV0d4ee8N86I\r\nERLxJLNr6n/sXfeLnQs5jqQzDZU5xNAcXBPVPvSeL1PLrot4axQl/LA28PyV\r\n2VBsCxj1UVLlIFudmooNxKwo70u4AT63WlkGl/fA48L1GKjROf0MjX+rGcfG\r\nG03U5oeJBZvrQwfLCGWb+UkLxMevG62FFmMubBPfki3jnwwz/6Np8Eailtms\r\ngrkMNaEXTG749K1/VhUjaQrqQTKBTe5mEiAPeN0slO/BQDVhV17FEWuIh8t2\r\n4uNdY/ZxFbiW8bqx6FKygBKXbs37UIGMFxgoJoOUpMsVIuKpydAJjvJV3t6a\r\nU0sNxHwVpfDllmJJsMluj4vGR9DUXrBxg7g=\r\n=YFP0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cogniteam","email":"frontend@cogniteam.com"},"directories":{},"maintainers":[{"name":"cogniteam","email":"frontend@cogniteam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-nipple_0.3.0_1670358808788_0.12350594005342574"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-06T20:33:28.707Z","0.3.0":"2022-12-06T20:33:29.099Z","modified":"2022-12-06T20:33:29.252Z"},"maintainers":[{"name":"cogniteam","email":"frontend@cogniteam.com"}],"description":"A react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick.","license":"MIT","readme":"# react-nipple\n\nA react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick.\n\n<img src=\"https://raw.githubusercontent.com/loopmode/react-nipple/master/packages/react-nipple/preview.gif\" />\n\n### Resources\n\n-   Github repository: [https://github.com/loopmode/react-nipple](https://github.com/loopmode/react-nipple)\n-   NPM package: [https://www.npmjs.com/package/react-nipple](https://www.npmjs.com/package/react-nipple)\n-   Docs: [https://loopmode.github.io/react-nipple/](https://loopmode.github.io/react-nipple/)\n\n## Installation\n\n```bash\nyarn add react-nipple\n# or using npm:\nnpm install --save react-nipple\n```\n\n## Usage\n\nImport and use the component. It supports all `options` from `nipplejs`.  \nIt provides callbacks for all supported event types in a camel-cased `on`-notation, e.g. `start` -> `onStart`.\n\n```javascript\nimport React from 'react';\nimport ReactNipple from 'react-nipple';\n\n// optional: include the stylesheet somewhere in your app\nimport 'react-nipple/lib/styles.css';\n\nclass Example extends React.Component {\n    render() {\n        return (\n            <div>\n                <ReactNipple\n                    // supports all nipplejs options\n                    // see https://github.com/yoannmoinet/nipplejs#options\n                    options={{ mode: 'static', position: { top: '50%', left: '50%' } }}\n                    // any unknown props will be passed to the container element, e.g. 'title', 'style' etc\n                    style={{\n                        outline: '1px dashed red',\n                        width: 150,\n                        height: 150\n                        // if you pass position: 'relative', you don't need to import the stylesheet\n                    }}\n                    // all events supported by nipplejs are available as callbacks\n                    // see https://github.com/yoannmoinet/nipplejs#start\n                    onMove={(evt, data) => console.log(evt, data)}\n                />\n            </div>\n        );\n    }\n}\n```\n\n### Additional features\n\n-   There is an additional `onCreated` callback that receives the created `nipplejs` instance - you might want to use it for direct access to instance methods etc.\n-   You can pass the boolean `static` flag as a prop, which is a shortcut for `options={{mode: 'static', position: {top: '50%', let: '50%'}}}`\n\n## Demo app\n\nThe repository is a yarn workspace that contains a small demo app next to the actual `react-nipples` package.  \nYou can play around with the demo after cloning the repository and installing the dependencies in the root folder.\n\n```\ngit clone https://github.com/loopmode/react-nipple.git\ncd react-nipple\nyarn install\nyarn demo\n```\n\n## Debug view\n\nThere is a debug view based on the official [codepen demo](https://codepen.io/YoannM/pen/gapmMG).\n\nIt supports a `data` prop that accepts the `data` object you receive with all `nipplejs` events, and simply renders its values.  \nUse it to quickly inspect the values.\n\n```javascript\nimport React from 'react';\nimport ReactNipple from 'react-nipple';\nimport DebugView from 'react-nipple/lib/DebugView';\n\nexport default class DebugExample extends React.Component {\n    state = {\n        data: {}\n    };\n    render() {\n        return (\n            <div>\n                <ReactNipple\n                    options={{ mode: 'static', position: { top: '50%', left: '50%' } }}\n                    style={{\n                        outline: '1px dashed red',\n                        color: 'blue',\n                        width: 150,\n                        height: 150,\n                        position: 'relative'\n                    }}\n                    onStart={this.handleEvent}\n                    onEnd={this.handleEvent}\n                    onMove={this.handleEvent}\n                    onDir={this.handleEvent}\n                    onPlain={this.handleEvent}\n                    onShown={this.handleEvent}\n                    onHidden={this.handleEvent}\n                    onPressure={this.handleEvent}\n                />\n                <DebugView data={this.state.data} />\n            </div>\n        );\n    }\n    handleEvent = (evt, data) => {\n        console.log(evt);\n        this.setState({ data });\n    };\n}\n```\n","readmeFilename":"README.md"}