wobbly
Version:
〰️ parallax all the things in react-vr
146 lines (110 loc) • 6.03 kB
Markdown
<!--
This file was generated by emdaer
Its template can be found at .emdaer/README.emdaer.md
-->
<h1 align="center">
wobbly
</br>
<img src="https://user-images.githubusercontent.com/1127238/38072922-8250c22a-32dd-11e8-8259-fb8ea3346dfc.png" alt="wobbly logo" title="wobbly logo" width="100">
</h1>
<p align="center">
〰️ parallax all the things in react-vr
</p>
<hr />
[](https://travis-ci.org/infiniteluke/wobbly/) [](https://www.npmjs.com/package/wobbly) [](https://github.com/infiniteluke/wobbly/issues) []() [](https://github.com/prettier/prettier) [](https://github.com/emdaer/emdaer)
</br>
[](https://twitter.com/intent/tweet?text=Parallax%20all%20the%20things%20with%20with%20wobbly%20〰️%20for%20react-vr!%20Check%20it%20out!%20https://github.com/infiniteluke/wobbly) [](https://github.com/infiniteluke/wobbly/stargazers)
wobbly 〰️ manages the state needed to calculate `x, y` rotations for a parallax effect, allowing you to focus the UI, and apply the effect how/where you want.. It uses the [function as child](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9) and "prop getter" patterns, which gives you maximum flexibility with a minimal API.
## Table of Contents
<!-- toc -->
* [Installation](#installation)
* [Usage](#usage)
* [Props](#props)
* [How To Render](#how-to-render)
* [Examples](#examples)
* [Contributing](#contributing)
* [License](#license)
<!-- tocstop -->
## Installation
This module is distributed via [npm](https://www.npmjs.com/package/wobbly) which is bundled with [node](https://nodejs.org) and
should be installed as one of your project's `dependencies`:
```
npm install --save wobbly
```
> This package also depends on `react-vr` and `react`. Please make sure you have those installed as well.
## Usage
```jsx
import Wobbly from 'wobbly';
import { Text, View, VrButton, Animated } from 'react-vr';
function ParallaxButton() {
return (
<Wobbly
// These props control how extreme wobbly 〰 is. Default to -15, 15 respectively.
parallaxDegreeLowerBound={-20}
parallaxDegreeUpperBound={20}
// The render prop is called on each render providing prop getters and state to be used in your UI.
// This function can alternatively be called as a child prop <Wobbly>{(stateAndHelpers) => {...}}</Wobbly>
render={({ getMoveTargetProps, getWobblyTransformStyle }) => (
<Animated.VrButton
// NOTE: The element you spread the transformation style into must be an "Animated" element.
style={{
backgroundColor: 'darkorchid',
padding: 0.2,
borderRadius: 0.03,
// Spread the transform styles into an element you want to make wobbly 〰
// This adds rotateX and a rotateY objects respectively
transform: [...getWobblyTransformStyle()],
}}
// Spread the wrapper props into an element whose onMove event will control the parallax effect.
// You can also pass an onMove/onExit handler to be called before wobbly's internal onMove/onExit.
// ...getMoveTargetProps({ onMove: (event) => {}})
{...getMoveTargetProps()}
>
<Text
style={{
fontSize: 0.3,
color: 'blanchedalmond',
}}
>
Wobbly
</Text>
</Animated.VrButton>
)}
/>
);
}
```
...creates something like this:</br>
## Props
See the [API Docs](https://infiniteluke.github.io/wobbly) for information on the props exposed by this package. The usage example above is not an exhaustive list.
## How To Render
wobbly 〰️ uses the child callback render function pattern. This is where you render whatever you want to based on the state of wobbly which is passed to the callback as parameters. The function is passed as the child prop of the Wobbly component:
```jsx
<Wobbly>
{({/* parameters here */}) => (/* your render code here*/)}
</Wobbly>
```
or can be called from the render prop
```jsx
<Wobbly
render= {({/* parameters here */}) => (/* your render code here*/)}
/>
```
The paramters of this function can be split into two categories: State and Prop Getters.
See the [API Docs](https://infiniteluke.github.io/dub-step/#stateandhelpers) for a list of these properties.
## Examples
Check out the [demo site](https://github.com/infiniteluke/wobbly-example) to see how wobbly 〰️ works in VR. See the [demo repo](https://infiniteluke.github.io/wobbly-example/) for the code behind the demo site.
## Contributing
If you'd like to make wobbly 〰️ better, please read our [guide to contributing](./CONTRIBUTING.md).
These wonderful people have contributed to wobbly 〰️ in one way or another:
<details>
<summary><strong>Contributors</strong></summary><br />
<a title="I build multi-channel publishing systems and web applications at @fourkitchens." href="https://github.com/infiniteluke">
<img align="left" src="https://avatars0.githubusercontent.com/u/1127238?s=24" />
</a>
<strong>Luke Herrington</strong>
<br /><br />
</details>
## License
wobbly is [MIT licensed](./LICENSE).