Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
react-drifting-component
Advanced tools
The drifting component which allows you to drift on the screen :) The component uses mousemove event for desktops and deviceorientation for mobile devices.
$ npm install react-drifting-component
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>
);
}
Please clone the repo and run npm run storybook
or yarn storybook
to show examples of usages.
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. |
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. :)
FAQs
Drifting react component
We found that react-drifting-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.