Nepotistic Pontifex Maximus

    react-drifting-component

    2.0.0 • Public • Published

    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 DriftingComponent from 'react-drifting-component';
     
    // Inside of a component's render() method:
    render() {
      return (
        <Wrapper>
          <DriftingComponent maxRange={15} maxMobileRange={15}>
            {({ pos, onRef }) => <Background x={pos.x} y={pos.y} onRef={onRef} />}
          </DriftingComponent>
     
          <DriftingComponent maxRange={50} maxMobileRange={20} reverse>
            {
              ({ pos, onRef }) =>
                <Text x={pos.x} y={pos.y} onRef={onRef} text="Drifting component" className="title" />
            }
          </DriftingComponent>
        </Wrapper>
      );
    }

    Examples

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

    Usage (API)

    The DriftingComponent 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
    maxRange number null Max drift range.
    maxMobileRange number null Max drift range for mobile 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. :)

    Install

    npm i react-drifting-component

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • z4o4z