react-drifting-component's Introduction

react-drifting-component

The drifting component which allows you to drift on the screen :) The component uses mousemove event for desktops and deviceorientation for mobile devices.

Installation

$ npm install react-drifting-component

Demo

Try it out

Basic Usage

import { Drifting } from 'react-drifting-component';

// Inside of a component's render() method:
render() {
  return (
    <Wrapper>
      <Drifting maxMouseRange={15} maxOrientationRange={15}>
        {({ ref }) => <Background ref={ref} />}
      </Drifting>

      <Drifting maxMouseRange={50} maxOrientationRange={20} reverse>
        {
          ({ pos, onRef }) =>
            <Text ref={ref} text="Drifting component" className="title" />
        }
      </Drifting>
    </Wrapper>
  );
}

Examples

Please clone the repo and run npm run storybook or yarn storybook to show examples of usages.

Usage (API)

The Drifting component has a few properties, as described below.

NOTE: this component uses rAF(requestAnimationFrame) if you need to support old browsers ensure that you are using polyfill for rAF!

Property	Type	Defaut	Description
`reverse`	`boolean`	`false`	Reverse drifting
`children`	`function`	`({ pos: { x, y } }, onRef: () => ref)`	A function that gets an object with `pos` and `onRef` keys as an argument. Pos contains `x: number` and `y: number`, this numbers should pass to your component style to allow drift. `onRef` it is function which should be passed to `ref` of your component
`maxMouseRange`	`number`	`null`	Max mouse drift range.
`maxOrientationRange`	`number`	`maxMouseRange`	Max orientation drift range. devices.

Contributing

I welcome contributions! Please open an issue if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)

Recommend Projects