Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/z4o4z/react-drifting-component
Allow your component drift on the screen
https://github.com/z4o4z/react-drifting-component
component drift js react reactjs
Last synced: 29 days ago
JSON representation
Allow your component drift on the screen
- Host: GitHub
- URL: https://github.com/z4o4z/react-drifting-component
- Owner: z4o4z
- License: mit
- Created: 2016-08-11T17:45:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-20T16:10:25.000Z (11 months ago)
- Last Synced: 2024-04-24T16:58:44.082Z (9 months ago)
- Topics: component, drift, js, react, reactjs
- Language: TypeScript
- Homepage: https://z4o4z.github.io/react-drifting-component/storybook-static/index.html
- Size: 17.9 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-drifting-component)
# 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](https://z4o4z.github.io/react-drifting-component/)
## Basic Usage
```js
import { Drifting } from 'react-drifting-component';
// Inside of a component's render() method:
render() {
return (
{({ ref }) => }
{
({ pos, onRef }) =>
}
);
}
```
## 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. :)