@dromney/react-gear-gen v0.1.21
@dromney/react-gear-gen
A typescript npm package that provides components and hooks for using the @dromney/gear-gen package to generate, display, and animate gears and gear patterns in React.
Installation
npm install @dromney/react-gear-gen
Intro
This package contains several components that can be used to display a single Gear
or Gearset
, along with useful hooks.
See @dromney/gear-gen ReadMe for more specific Gear
, Gearset
, generators, and styles usage
Examples
Example components that use one of the below components to display a Gear or Gearset imported from the @dromney/gear-gen examples/generators can be found in src/examples
The repo @dromney/react-gear-gen-example is a live-hosted example of this package (hosted here)
SimpleSpinner
The SimpleSpinner
component takes a gear
and rpm
as props and displays the gear spinning at that rpm.
import React, { useEffect, useState } from 'react';
import { SimpleSpinner } from '@dromney/react-gear-gen';
import { ExampleGears } from '@dromney/gear-gen';
export default function ExampleSimpleSpinner() {
return <SimpleSpinner gear={ExampleGears()[2]} rpm={8} />
}
PositionedGearSetViewer
The PositionedGearSetViewer
component takes the following props:
gearSet
(required):GearSet
rot
(optional, default0
): number used to animate theGearSet
or give a fixed angle of rotation of the parent gear. DegreesshowGrid
(optional, defaultfalse
): boolean - if true, displays a grid in the backgroundpadding
(optional default0
): number that adds visual padding to theGearSet
display. Pixels
The following example uses an example randomly generated gearset:
import React, { useEffect, useState } from 'react';
import { PositionedGearSetViewer } from '@dromney/react-gear-gen';
import { GearSet, RandomBackAndForth } from '@dromney/gear-gen';
export default function ExamplePositionedGearSetViewer() {
const [gearSet, setGearSet] = useState<GearSet>()
useEffect(() => {
setGearSet(new GearSet(RandomBackAndForth(10)))
}, [])
if (!gearSet) return null
return <PositionedGearSetViewer gearSet={gearSet} rot={0} showGrid={false} padding={10} />
}
SpinningGearSetViewer
The SpinningGearSetViewer
component is a wrapper around the PositionedGearSetViewer
that takes a speed and optional update frequency. Instead of rot
, it takes:
rpm
(required): the speed in RPM at which to rotate the parent gearfps
(optional, default 60): visual update frequency in Hz and generatesrot
. It acceptsgearSet
,showGrid
, andpadding
as described for thePositionedGearSetViewer
.
The following example uses the ExampleGears
from @dromney/gear-gen
:
import React, { useEffect, useState } from 'react';
import { ExampleGears, GearSet } from '@dromney/gear-gen';
import SpinningGearSetViewer from '@dromney/react-gear-gen';
function ExampleSpinningGearSet({ spin = false }: { spin?: boolean }) {
const [gearSet, setGearSet] = useState<GearSet>()
useEffect(() => {
setGearSet(new GearSet(ExampleGears()))
}, [])
if (!gearSet) return null
return <SpinningGearSetViewer gearSet={gearSet} showGrid={true} padding={3} rpm={20} />
}
MouseGearSetViewer
The MouseGearSetViewer
component is another wrapper around the PositionedGearSetViewer
that animates gears using movement of the mouse. So it accepts gearSet
, showGrid
, and padding
as described for the PositionedGearSetViewer
, but does NOT take the rot
prop. The mouse movement hook is included in the library.
Example:
// ...(otherwise similar to above SpinningGearSetViewer)
return <MouseGearSetViewer gearSet={gearSet} showGrid={false} />
SpinningOrMouseGearSetViewer
The SpinningOrMouseGearSetViewer
component is a wrapper around both the MouseGearSetViewer
and SpinningGearSetViewer
components that also accepts a spin
prop. If spin
is true, it displays the SpinningGearSetViewer
, otherwise, it returns the MouseGearSetViewer
. This is specifically useful for displaying a spinner on mobile devices and a more responsive mouse viewer on devices with a mouse.
// ...(otherwise similar to above SpinningGearSetViewer)
return <SpinningOrMouseGearSetViewer spin={spin} gearSet={gearSet} showGrid={true} padding={3} rpm={20} />
1 month ago
1 month ago
1 month ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago