49 |
50 |
51 |
Nipple
52 |
53 |
54 |
55 |
56 |
57 |
Extends:
react~Component → Nipple
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
A react wrapper component for nipplejs.
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Static Member Summary
81 | | Static Public Members |
82 |
83 |
84 |
85 | |
86 | public
87 | static
88 | get
89 |
90 |
91 | |
92 |
93 |
94 |
95 |
96 |
97 | propTypes: {"className": *, "options": *, "static": *, "onStart": *, "onEnd": *, "onMove": *, "onDir": *, "onPlain": *, "onShown": *, "onHidden": *, "onPressure": *, "onCreated": *, "onDestroy": *}
98 |
99 |
101 |
102 |
103 | Component propTypes
104 |
105 | |
107 |
108 |
109 |
110 | |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
Static Public Members
123 |
124 |
125 |
126 | public
127 | static
128 | get
129 |
130 |
131 |
132 | propTypes: {"className": *, "options": *, "static": *, "onStart": *, "onEnd": *, "onMove": *, "onDir": *, "onPlain": *, "onShown": *, "onHidden": *, "onPressure": *, "onCreated": *, "onDestroy": *}
133 |
134 |
135 |
136 | source
137 |
138 |
139 |
140 |
141 |
142 |
143 |
Component propTypes
144 |
Any additional (unknown) props will be passed along as attributes of the created DOM element.
145 |
146 |
147 |
148 |
149 |
150 |
Properties:
151 |
152 |
153 | | Name | Type | Attribute | Description |
154 |
155 |
156 |
157 |
158 | | className |
159 | string |
160 | |
161 | A css classname for the DOM element
162 | |
163 |
164 |
165 | | options |
166 | object |
167 | |
168 | An object with nipplejs options, see https://github.com/yoannmoinet/nipplejs#options
169 | |
170 |
171 |
172 | | static |
173 | boolean |
174 | |
175 | A shortcut for setting the options {mode: 'static', position: {top: '50%', left: '50%'}}. Will override values in the options object.
176 | |
177 |
178 |
179 | | onCreated |
180 | function |
181 | |
182 | Callback that is invoked with the created instance
183 | |
184 |
185 |
186 | | onDestroy |
187 | function |
188 | |
189 | Callback that is invoked with the instance that is going to be destroyed
190 | |
191 |
192 |
193 | | onStart |
194 | function |
195 | |
196 | Callback for the 'start' event handler, see https://github.com/yoannmoinet/nipplejs#start
197 | |
198 |
199 |
200 | | onEnd |
201 | function |
202 | |
203 | Callback for the 'end' event handler, see https://github.com/yoannmoinet/nipplejs#end
204 | |
205 |
206 |
207 | | onMove |
208 | function |
209 | |
210 | Callback for the 'move' event handler, see https://github.com/yoannmoinet/nipplejs#move
211 | |
212 |
213 |
214 | | onDir |
215 | function |
216 | |
217 | Callback for the 'dir' event handler, see https://github.com/yoannmoinet/nipplejs#dir
218 | |
219 |
220 |
221 | | onPlain |
222 | function |
223 | |
224 | Callback for the 'plain' event handler, see https://github.com/yoannmoinet/nipplejs#plain
225 | |
226 |
227 |
228 | | onShown |
229 | function |
230 | |
231 | Callback for the 'shown' event handler, see https://github.com/yoannmoinet/nipplejs#shown
232 | |
233 |
234 |
235 | | onHidden |
236 | function |
237 | |
238 | Callback for the 'hidden' event handler, see https://github.com/yoannmoinet/nipplejs#hidden
239 | |
240 |
241 |
242 | | onPressure |
243 | function |
244 | |
245 | Callback for the 'pressure' event handler, see https://github.com/yoannmoinet/nipplejs#pressure
246 | |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
49 |
50 |
51 |
ReactNipple
52 |
53 |
54 |
55 |
56 |
57 |
Extends:
react~Component → ReactNipple
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
A react wrapper component for nipplejs.
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Static Member Summary
81 | | Static Public Members |
82 |
83 |
84 |
85 | |
86 | public
87 | static
88 | get
89 |
90 |
91 | |
92 |
93 |
94 |
95 |
96 |
97 | propTypes: {"className": *, "options": *, "static": *, "onStart": *, "onEnd": *, "onMove": *, "onDir": *, "onPlain": *, "onShown": *, "onHidden": *, "onPressure": *, "onCreated": *, "onDestroy": *}
98 |
99 |
101 |
102 |
103 | Component propTypes
104 |
105 | |
107 |
108 |
109 |
110 | |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
Static Public Members
123 |
124 |
125 |
126 | public
127 | static
128 | get
129 |
130 |
131 |
132 | propTypes: {"className": *, "options": *, "static": *, "onStart": *, "onEnd": *, "onMove": *, "onDir": *, "onPlain": *, "onShown": *, "onHidden": *, "onPressure": *, "onCreated": *, "onDestroy": *}
133 |
134 |
135 |
136 | source
137 |
138 |
139 |
140 |
141 |
142 |
143 |
Component propTypes
144 |
Any additional (unknown) props will be passed along as attributes of the created DOM element.
145 |
146 |
147 |
148 |
149 |
150 |
Properties:
151 |
152 |
153 | | Name | Type | Attribute | Description |
154 |
155 |
156 |
157 |
158 | | className |
159 | string |
160 | |
161 | A css classname for the DOM element
162 | |
163 |
164 |
165 | | options |
166 | object |
167 | |
168 | An object with nipplejs options, see https://github.com/yoannmoinet/nipplejs#options
169 | |
170 |
171 |
172 | | static |
173 | boolean |
174 | |
175 | A shortcut for setting the options {mode: 'static', position: {top: '50%', left: '50%'}}. Will override values in the options object.
176 | |
177 |
178 |
179 | | onCreated |
180 | function |
181 | |
182 | Callback that is invoked with the created instance
183 | |
184 |
185 |
186 | | onDestroy |
187 | function |
188 | |
189 | Callback that is invoked with the instance that is going to be destroyed
190 | |
191 |
192 |
193 | | onStart |
194 | function |
195 | |
196 | Callback for the 'start' event handler, see https://github.com/yoannmoinet/nipplejs#start
197 | |
198 |
199 |
200 | | onEnd |
201 | function |
202 | |
203 | Callback for the 'end' event handler, see https://github.com/yoannmoinet/nipplejs#end
204 | |
205 |
206 |
207 | | onMove |
208 | function |
209 | |
210 | Callback for the 'move' event handler, see https://github.com/yoannmoinet/nipplejs#move
211 | |
212 |
213 |
214 | | onDir |
215 | function |
216 | |
217 | Callback for the 'dir' event handler, see https://github.com/yoannmoinet/nipplejs#dir
218 | |
219 |
220 |
221 | | onPlain |
222 | function |
223 | |
224 | Callback for the 'plain' event handler, see https://github.com/yoannmoinet/nipplejs#plain
225 | |
226 |
227 |
228 | | onShown |
229 | function |
230 | |
231 | Callback for the 'shown' event handler, see https://github.com/yoannmoinet/nipplejs#shown
232 | |
233 |
234 |
235 | | onHidden |
236 | function |
237 | |
238 | Callback for the 'hidden' event handler, see https://github.com/yoannmoinet/nipplejs#hidden
239 | |
240 |
241 |
242 | | onPressure |
243 | function |
244 | |
245 | Callback for the 'pressure' event handler, see https://github.com/yoannmoinet/nipplejs#pressure
246 | |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
src/DebugView.js
41 |
import React, { Component } from 'react';
42 | import PropTypes from 'prop-types';
43 |
44 | export default class DebugView extends Component {
45 | static propTypes = {
46 | data: PropTypes.shape({
47 | position: PropTypes.shape({
48 | x: PropTypes.number,
49 | y: PropTypes.number
50 | }),
51 | angle: PropTypes.shape({
52 | radian: PropTypes.number,
53 | degree: PropTypes.number
54 | }),
55 | direction: PropTypes.shape({
56 | x: PropTypes.number,
57 | y: PropTypes.number,
58 | angle: PropTypes.number
59 | }),
60 | force: PropTypes.number,
61 | pressure: PropTypes.number,
62 | distance: PropTypes.number
63 | })
64 | };
65 | render() {
66 | const { position = {}, force, pressure, distance, angle = {}, direction = {} } = this.props.data || {};
67 |
68 | return (
69 | <div className="debug">
70 | <ul>
71 | <li className="position">
72 | position :
73 | <ul>
74 | <li className="x">
75 | x :
76 | <span className="data" children={position.x} />
77 | </li>
78 | <li className="y">
79 | y :
80 | <span className="data" children={position.y} />
81 | </li>
82 | </ul>
83 | </li>
84 | <li className="force">
85 | force : <span className="data" children={force} />
86 | </li>
87 | <li className="pressure">
88 | pressure : <span className="data" children={pressure} />
89 | </li>
90 | <li className="distance">
91 | distance : <span className="data" children={distance} />
92 | </li>
93 | <li className="angle">
94 | angle :
95 | <ul>
96 | <li className="radian">
97 | radian :
98 | <span className="data" children={angle.radian} />
99 | </li>
100 | <li className="degree">
101 | degree :
102 | <span className="data" children={angle.degree} />
103 | </li>
104 | </ul>
105 | </li>
106 | <li className="direction">
107 | direction :
108 | <ul>
109 | <li className="x">
110 | x :
111 | <span className="data" children={direction.x} />
112 | </li>
113 | <li className="y">
114 | y :
115 | <span className="data" children={direction.y} />
116 | </li>
117 | <li className="angle">
118 | angle :
119 | <span className="data" children={direction.angle} />
120 | </li>
121 | </ul>
122 | </li>
123 | </ul>
124 | <div className="dump" />
125 | </div>
126 | );
127 | }
128 | }
129 |
130 |
131 |
src/ReactNipple.js
41 |
import nipplejs from 'nipplejs';
42 | import autobind from 'autobind-decorator';
43 | import isEqual from 'lodash.isequal';
44 | import PropTypes from 'prop-types';
45 | import React, { Component } from 'react';
46 |
47 | import cx from 'classnames';
48 |
49 | /**
50 | * A react wrapper component for `nipplejs`.
51 | * @see https://www.npmjs.com/package/nipplejs
52 | * @author Jovica Aleksic <jovica.aleksic@loopmode.de>
53 | */
54 | export default class ReactNipple extends Component {
55 | /* eslint-disable no-trailing-spaces */
56 | /**
57 | * Component propTypes
58 | *
59 | * Any additional (unknown) props will be passed along as attributes of the created DOM element.
60 | *
61 | * @property {string} className - A css classname for the DOM element
62 | * @property {object} options - An object with nipplejs options, see https://github.com/yoannmoinet/nipplejs#options
63 | * @property {boolean} static - A shortcut for setting the options `{mode: 'static', position: {top: '50%', left: '50%'}}`. Will override values in the `options` object.
64 | * @property {function} onCreated - Callback that is invoked with the created instance
65 | * @property {function} onDestroy - Callback that is invoked with the instance that is going to be destroyed
66 | * @property {function} onStart - Callback for the 'start' event handler, see https://github.com/yoannmoinet/nipplejs#start
67 | * @property {function} onEnd - Callback for the 'end' event handler, see https://github.com/yoannmoinet/nipplejs#end
68 | * @property {function} onMove - Callback for the 'move' event handler, see https://github.com/yoannmoinet/nipplejs#move
69 | * @property {function} onDir - Callback for the 'dir' event handler, see https://github.com/yoannmoinet/nipplejs#dir
70 | * @property {function} onPlain - Callback for the 'plain' event handler, see https://github.com/yoannmoinet/nipplejs#plain
71 | * @property {function} onShown - Callback for the 'shown' event handler, see https://github.com/yoannmoinet/nipplejs#shown
72 | * @property {function} onHidden - Callback for the 'hidden' event handler, see https://github.com/yoannmoinet/nipplejs#hidden
73 | * @property {function} onPressure - Callback for the 'pressure' event handler, see https://github.com/yoannmoinet/nipplejs#pressure
74 | */
75 | /* eslint-enable no-trailing-spaces */
76 | static get propTypes() {
77 | return {
78 | className: PropTypes.string,
79 | options: PropTypes.shape({
80 | color: PropTypes.string,
81 | size: PropTypes.integer,
82 | threshold: PropTypes.float, // before triggering a directional event
83 | fadeTime: PropTypes.integer, // transition time
84 | multitouch: PropTypes.bool,
85 | maxNumberOfNipples: PropTypes.number, // when multitouch, what is too many?
86 | dataOnly: PropTypes.bool, // no dom element whatsoever
87 | position: PropTypes.object, // preset position for 'static' mode
88 | mode: PropTypes.string, // 'dynamic', 'static' or 'semi'
89 | restJoystick: PropTypes.bool,
90 | restOpacity: PropTypes.number, // opacity when not 'dynamic' and rested
91 | catchDistance: PropTypes.number
92 | }),
93 | static: PropTypes.bool,
94 | onStart: PropTypes.func,
95 | onEnd: PropTypes.func,
96 | onMove: PropTypes.func,
97 | onDir: PropTypes.func,
98 | onPlain: PropTypes.func,
99 | onShown: PropTypes.func,
100 | onHidden: PropTypes.func,
101 | onPressure: PropTypes.func,
102 | onCreated: PropTypes.func,
103 | onDestroy: PropTypes.func
104 | };
105 | }
106 |
107 | get ownProps() {
108 | return [
109 | 'options',
110 | 'static',
111 | 'onStart',
112 | 'onEnd',
113 | 'onMove',
114 | 'onDir',
115 | 'onPlain',
116 | 'onShown',
117 | 'onHidden',
118 | 'onPressure',
119 | 'onCreated'
120 | ];
121 | }
122 | get elementProps() {
123 | return Object.entries(this.props).reduce((result, [key, value]) => {
124 | if (this.ownProps.includes(key)) {
125 | return result;
126 | }
127 | result[key] = value;
128 | return result;
129 | }, {});
130 | }
131 |
132 | componentDidUpdate(prevProps) {
133 | if (!isEqual(prevProps.options, this.props.options)) {
134 | this.destroyJoystick();
135 | this.createJoystick();
136 | }
137 | }
138 |
139 | render() {
140 | return (
141 | <div {...this.elementProps} ref={this.handleElement} className={cx('ReactNipple', this.props.className)} />
142 | );
143 | }
144 |
145 | //-----------------------------------
146 | //
147 | // impl
148 | //
149 | //-----------------------------------
150 |
151 | @autobind
152 | handleElement(ref) {
153 | this._element = ref;
154 | if (ref) {
155 | this.createJoystick(this.props);
156 | } else if (this._element) {
157 | this.destroyJoystick();
158 | }
159 | }
160 | createJoystick(props) {
161 | const options = {
162 | zone: this._element,
163 | ...props.options
164 | };
165 |
166 | if (this.props.static) {
167 | options.mode = 'static';
168 | options.position = {
169 | top: '50%',
170 | left: '50%'
171 | };
172 | }
173 |
174 | const joystick = nipplejs.create(options);
175 | joystick.on('start', this.handleJoystickStart);
176 | joystick.on('end', this.handleJoystickEnd);
177 | joystick.on('move', this.handleJoystickMove);
178 | joystick.on('dir', this.handleJoystickDir);
179 | joystick.on('plain', this.handleJoystickPlain);
180 | joystick.on('shown', this.handleJoystickShown);
181 | joystick.on('hidden', this.handleJoystickHidden);
182 | joystick.on('pressure', this.handleJoystickPressure);
183 |
184 | this.joystick = joystick;
185 |
186 | if (props.onCreated) {
187 | props.onCreated(this.joystick);
188 | }
189 | }
190 | destroyJoystick() {
191 | if (this.joystick) {
192 | this.joystick.destroy();
193 | this.joystick = undefined;
194 | }
195 | }
196 | invokeCallback(type, evt, data) {
197 | if (this.props[type]) {
198 | this.props[type](evt, data);
199 | }
200 | }
201 | @autobind
202 | handleJoystickStart(evt, data) {
203 | this.invokeCallback('onStart', evt, data);
204 | }
205 | @autobind
206 | handleJoystickEnd(evt, data) {
207 | this.invokeCallback('onEnd', evt, data);
208 | }
209 | @autobind
210 | handleJoystickMove(evt, data) {
211 | this.invokeCallback('onMove', evt, data);
212 | }
213 | @autobind
214 | handleJoystickDir(evt, data) {
215 | this.invokeCallback('onDir', evt, data);
216 | }
217 | @autobind
218 | handleJoystickPlain(evt, data) {
219 | this.invokeCallback('onPlain', evt, data);
220 | }
221 | @autobind
222 | handleJoystickShown(evt, data) {
223 | this.invokeCallback('onShown', evt, data);
224 | }
225 | @autobind
226 | handleJoystickHidden(evt, data) {
227 | this.invokeCallback('onHidden', evt, data);
228 | }
229 | @autobind
230 | handleJoystickPressure(evt, data) {
231 | this.invokeCallback('onPressure', evt, data);
232 | }
233 | }
234 |
235 |
236 |
src/index.js
41 |
export default from './ReactNipple';
42 |
43 |
44 |
References
41 |
Class Summary
42 | | Static Public Class Summary |
43 |
44 |
45 |
46 | |
47 | public
48 |
49 |
50 |
51 |
52 | |
53 |
54 |
61 |
62 |
63 |
64 | A react wrapper component for nipplejs.
65 |
66 | |
68 |
69 |
70 |
71 | |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
react-nipple
41 |
A react wrapper for the nipplejs on-screen-joystick.
42 |
43 |
Installation
44 |
yarn add react-nipple
45 | # or using npm:
46 | npm install --save react-nipple
47 |
48 |
Resources
49 |
54 |
Usage
55 |
Import and use the component. It supports all options from nipplejs.
It provides callbacks for all supported event types in a camel-cased on-notation, e.g. start -> onStart.
56 |
import React from 'react';
57 | import ReactNipple from 'react-nipple';
58 |
59 | // optional: include the stylesheet somewhere in your app
60 | import 'react-nipple/lib/styles.css';
61 |
62 | class Example extends React.Component {
63 | render() {
64 | return (
65 | <div>
66 | <ReactNipple
67 | // supports all nipplejs options
68 | // see https://github.com/yoannmoinet/nipplejs#options
69 | options={{ mode: 'static', position: { top: '50%', left: '50%' } }}
70 | // any unknown props will be passed to the container element, e.g. 'title', 'style' etc
71 | style={{
72 | outline: `1px dashed red`,
73 | width: 150,
74 | height: 150
75 | // if you pass position: 'relative', you don't need to import the stylesheet
76 | }}
77 | // all events supported by nipplejs are available as callbacks
78 | // see https://github.com/yoannmoinet/nipplejs#start
79 | onMove={(evt, data) => console.log(evt, data)}
80 | />
81 | </div>
82 | );
83 | }
84 | }
85 |
86 |
Additional features
87 |
88 | - 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.
89 | - You can pass the boolean
static flag as a prop, which is a shortcut for options={{mode: 'static', position: {top: '50%', let: '50%'}}}
90 |
91 |
Demo app
92 |
The repository is a yarn workspace that contains a small demo app next to the actual react-nipples package.
You can play around with the demo after cloning the repository and installing the dependencies in the root folder.
93 |
git clone https://github.com/loopmode/react-nipple.git
94 | cd react-nipple
95 | yarn install
96 | yarn demo
97 |
Debug view
98 |
There is a debug view based on the official codepen demo.
99 |
It supports a data prop that accepts the data object you receive with all nipplejs events, and simply renders its values.
Use it to quickly inspect the values.
100 |
import React from 'react';
101 | import ReactNipple from 'react-nipple';
102 | import DebugView from 'react-nipple/lib/DebugView';
103 |
104 | class ReactNippleExample extends React.Component {
105 | state = {
106 | data: {}
107 | };
108 | render() {
109 | return (
110 | <div>
111 | <ReactNipple
112 | options={{mode: 'static', position: {top: '50%', left: '50%'}}}
113 | style={{
114 | outline: `1px dashed red`,
115 | width: 150,
116 | height: 150
117 | position: `relative`
118 | }}
119 |
120 | onStart={this.handleEvent}
121 | onEnd={this.handleEvent}
122 | onMove={this.handleEvent}
123 | onDir={this.handleEvent}
124 | onPlain={this.handleEvent}
125 | onShown={this.handleEvent}
126 | onHidden={this.handleEvent}
127 | onPressure={this.handleEvent}
128 | />
129 | <DebugView data={this.state.data} />
130 | </div>
131 | );
132 | }
133 | handleEvent = (evt, data) => {
134 | console.log(evt);
135 | this.setState({ data });
136 | }
137 | }
138 |
139 |
140 |
26 |
27 | 
