Repository files navigation

If you want to implement 3D touch on your react component this is the module for you

npm i --save react-pressure

The project wrapps al the functionalities from Pressure.js into a React High Order component, any component enchanced by this will haveforce andpressing in itsprops . The HOC allows you to pass some config options.

• force : Contains a number between 0 and 1, it represents the amount of pressure done by the user
• pressing : Contains *true* or *false*, it represents if the user is currently pressing or not the component

• debug: true | false
• polyfill: true | false
• polyfillSpeedUp: 0 - 1000
• polyfillSpeedDown: 0
• preventSelect: true
• only: null | "touch" | "mouse" | "pointer"

By default is false, if true then the component will print warnings/logs.

Using the "polyfill" keyword, you can disable polyfill support for the element. The polyfill is enabled by default and is useful if the device or browser does not support pressure, it will fall back to using time. For example instead of force from 0 to 1, it counts up from 0 to 1 over the course of one second, as long as you are holding the element. Try some of the examples on the main page on a devices that does not support pressure and see for yourself how it works.

If you are using the polyfill, you can use the "polyfillSpeedUp" speed to determine how fast the polyfill takes to go from 0 to 1. The value is an integer in milliseconds and the default is 1000 (1 second).These great products are built on Semantic UI React. Add yours [here][22].

If you are using the polyfill, you can use the "polyfillSpeedDown" speed to determine how fast the polyfill takes to go from 1 to 0 when the elemnt is released. The value is an integer in milliseconds and the default is 0 (aka off).

With Pressure, the third paramater is an optional object of options that can be passed in. The first option is device targeting. Using the "only" keyword, you can define if you want pressure to respond to ONLY touch, ONLY Mouse, or ONLY Pointer events.

touch: Iphones with 3D touch (6s,7)mouse: Mac with Force Touch (Macbook Pro 2016/2017)pointer: Wacom Tablets or devices that support Pointer Events

Both Mac and iPhones have system wide features that they default to when force clicking on something (ex. defining a word on Mac or "peeking and popping" an image on iOS). Pressure prevents those actions from happening, however if you still want those actions to be possible on "Pressure" elements, you can pass in "preventSelect" as an option.

If you want to implement 3D touch on your component you can do something like this:

importReact,{Component}from'react';importPressurefrom'react-pressure';classMyGreatComponentextendsComponent{render(){constmessage=this.props.pressing?"Stop please":"Touch me";return(<div><h1>This is an awesome component</h1><p>{message}</p><p>The whole component has 3D touch detection</p><p>You are using{this.props.force} force</p></div>);}}//This is the important partexportdefaultPressure(MyGreatComponent);

By default all components have the configuration:

{polyfill:true,polyfillSpeedUp:1000,polyfillSpeedDown:1000,preventSelect:true,only:null}

If you want to add some configurations you can modify the last part from the previous code and write something like this:(You can override some,none or all of the configurations)

//Now this changedconstconfigs={polyfill:false,//Only people with 3D touchonly:"touch"//Only Iphones}exportdefaultPressure(MyGreatComponent,configs);

If you are using react-redux you can do something like:

exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Pressure(MyGreatComponent));

If you have any doubt/recommendation you can write me or any trouble you can create a new thread on theissues area of the repository#ISSUES:0.1.2 The latest realese of pressure.js has a weird bug in some Android devices, this new realese of react-pressure has a hotfix while the core code is upgraded, if you don't pass a configuration object then the HOC will try to guess if you are using a mobile phone, if it is de case then it uses the only:"touch", else it continues with the default configurations. 09/12/2017

#LIVE EXAMPLE:

Pressure Cubes: React & Three.js videogame that implements 3D touch to avoid cubes