{"id":20859797,"url":"https://github.com/romneyda/react-gear-gen","last_synced_at":"2026-04-14T12:34:04.753Z","repository":{"id":187335746,"uuid":"676732237","full_name":"RomneyDa/react-gear-gen","owner":"RomneyDa","description":"A library for displaying gear patterns in react","archived":false,"fork":false,"pushed_at":"2024-04-10T18:25:53.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T22:37:48.464Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RomneyDa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-08-09T22:07:21.000Z","updated_at":"2023-11-12T15:15:50.000Z","dependencies_parsed_at":"2023-11-12T17:40:42.809Z","dependency_job_id":"130ac102-5138-40c4-8d62-4e40b3974abc","html_url":"https://github.com/RomneyDa/react-gear-gen","commit_stats":null,"previous_names":["romneyda/react-gear-gen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomneyDa%2Freact-gear-gen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomneyDa%2Freact-gear-gen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomneyDa%2Freact-gear-gen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomneyDa%2Freact-gear-gen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RomneyDa","download_url":"https://codeload.github.com/RomneyDa/react-gear-gen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243232068,"owners_count":20258031,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T04:53:10.573Z","updated_at":"2025-12-25T12:18:54.553Z","avatar_url":"https://github.com/RomneyDa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dromney/react-gear-gen\nA typescript npm package that provides components and hooks for using the [@dromney/gear-gen](https://github.com/romneyda/gear-gen) package to generate, display, and animate gears and gear patterns in React.\n\n## Installation\n### `npm install @dromney/react-gear-gen`\n\n## Intro\nThis package contains several components that can be used to display a single `Gear` or `Gearset`, along with useful hooks.\n\nSee [@dromney/gear-gen](https://github.com/romneyda/gear-gen) ReadMe for more specific `Gear`, `Gearset`, generators, and styles usage\n\n## Examples\nExample 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](https://github.com/RomneyDa/react-gear-gen/tree/main/src/examples)\n\nThe repo [@dromney/react-gear-gen-example](https://github.com/romneyda/react-gear-gen-example) is a live-hosted example of this package (hosted [here](https://incomparable-biscotti-92aa2f.netlify.app/))\n\n### SimpleSpinner\nThe `SimpleSpinner` component takes a `gear` and `rpm` as props and displays the gear spinning at that rpm.\n\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { SimpleSpinner } from '@dromney/react-gear-gen';\nimport { ExampleGears } from '@dromney/gear-gen';\n\nexport default function ExampleSimpleSpinner() {\n    return \u003cSimpleSpinner gear={ExampleGears()[2]} rpm={8} /\u003e\n}\n```\n\n### PositionedGearSetViewer\nThe `PositionedGearSetViewer` component takes the following props:\n- `gearSet` (required): `GearSet`\n- `rot` (optional, default `0`): number used to animate the `GearSet` or give a fixed angle of rotation of the parent gear. Degrees\n- `showGrid` (optional, default `false`): boolean - if true, displays a grid in the background\n- `padding` (optional default `0`): number that adds visual padding to the `GearSet` display. Pixels\n\nThe following example uses an example randomly generated gearset:\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { PositionedGearSetViewer } from '@dromney/react-gear-gen';\nimport { GearSet, RandomBackAndForth } from '@dromney/gear-gen';\n\nexport default function ExamplePositionedGearSetViewer() {\n    const [gearSet, setGearSet] = useState\u003cGearSet\u003e()\n    useEffect(() =\u003e {\n        setGearSet(new GearSet(RandomBackAndForth(10)))\n    }, [])\n    if (!gearSet) return null\n    return \u003cPositionedGearSetViewer gearSet={gearSet} rot={0} showGrid={false} padding={10} /\u003e\n}\n```\n\n### SpinningGearSetViewer\nThe `SpinningGearSetViewer` component is a wrapper around the `PositionedGearSetViewer` that takes a speed and optional update frequency. Instead of `rot`, it takes:\n- `rpm` (required): the speed in RPM at which to rotate the parent gear\n- `fps` (optional, default 60): visual update frequency in Hz\nand generates `rot`. It accepts `gearSet`, `showGrid`, and `padding` as described for the `PositionedGearSetViewer`.\n\nThe following example uses the `ExampleGears` from `@dromney/gear-gen`:\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { ExampleGears, GearSet } from '@dromney/gear-gen';\nimport SpinningGearSetViewer from '@dromney/react-gear-gen';\n\nfunction ExampleSpinningGearSet({ spin = false }: { spin?: boolean }) {\n    const [gearSet, setGearSet] = useState\u003cGearSet\u003e()\n    useEffect(() =\u003e {\n        setGearSet(new GearSet(ExampleGears()))\n    }, [])\n    if (!gearSet) return null\n    return \u003cSpinningGearSetViewer gearSet={gearSet} showGrid={true} padding={3} rpm={20} /\u003e\n}\n```\n\n### MouseGearSetViewer\nThe `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.\n\nExample:\n```typescript\n// ...(otherwise similar to above SpinningGearSetViewer)\n    return \u003cMouseGearSetViewer gearSet={gearSet} showGrid={false} /\u003e\n```\n\n### SpinningOrMouseGearSetViewer\nThe `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.\n```typescript\n// ...(otherwise similar to above SpinningGearSetViewer)\n    return \u003cSpinningOrMouseGearSetViewer spin={spin} gearSet={gearSet} showGrid={true} padding={3} rpm={20} /\u003e\n```\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromneyda%2Freact-gear-gen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromneyda%2Freact-gear-gen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromneyda%2Freact-gear-gen/lists"}