{"id":19175423,"url":"https://github.com/andrepolischuk/react-rotation","last_synced_at":"2025-04-09T15:08:20.668Z","repository":{"id":34544605,"uuid":"38489081","full_name":"andrepolischuk/react-rotation","owner":"andrepolischuk","description":"React rotation component","archived":false,"fork":false,"pushed_at":"2020-06-23T13:22:52.000Z","size":1062,"stargazers_count":112,"open_issues_count":6,"forks_count":28,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-27T05:23:02.820Z","etag":null,"topics":["mouse","react","rotation","touch","wheel"],"latest_commit_sha":null,"homepage":"http://andrepolischuk.github.io/react-rotation","language":"JavaScript","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/andrepolischuk.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}},"created_at":"2015-07-03T11:18:34.000Z","updated_at":"2023-07-11T00:17:18.000Z","dependencies_parsed_at":"2022-09-08T12:01:29.834Z","dependency_job_id":null,"html_url":"https://github.com/andrepolischuk/react-rotation","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepolischuk%2Freact-rotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepolischuk%2Freact-rotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepolischuk%2Freact-rotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepolischuk%2Freact-rotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrepolischuk","download_url":"https://codeload.github.com/andrepolischuk/react-rotation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246785408,"owners_count":20833471,"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":["mouse","react","rotation","touch","wheel"],"created_at":"2024-11-09T10:23:13.363Z","updated_at":"2025-04-02T14:02:10.558Z","avatar_url":"https://github.com/andrepolischuk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-rotation [![Build Status][travis-image]][travis-url]\n\n\u003e [React][react] rotation component\n\nSupports wheel, keyboard, mouse and touch events\n\n## Install\n\n```sh\nnpm install --save react-rotation\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport {render} from 'react-dom'\nimport Rotation from 'react-rotation'\n\nrender(\n  \u003cRotation\u003e\n    \u003cimg src='images/00.jpg' /\u003e\n    \u003cimg src='images/01.jpg' /\u003e\n    \u003cimg src='images/02.jpg' /\u003e\n    \u003cimg src='images/03.jpg' /\u003e\n  \u003c/Rotation\u003e,\n  document.querySelector('.container')\n)\n```\n\n## Props\n\n* `className` - class name of container, *string*\n* `cycle` - cyclic rotation, *boolean*, default `false`\n* `scroll` - rotation by wheel/scroll, *boolean*, default `true`\n* `vertical` - vertical orientation, *boolean*, default `false`\n* `reverse` - reverse rotation, *boolean*, default `false`\n* `tabIndex` - order of focusable element, *number|string*, default `0`\n* `autoPlay` - start a frame playback with specified speed, *boolean|number*, default `false`\n* `pauseOnHover` - pause a frame playback on mouse hover, *boolean*, default `false`\n* `onChange` - frame change event handler, *function*\n\n## Tips\n\nYou can use any third-party wrapper for lazy loading the images with placeholder:\n\n```js\nimport React from 'react'\nimport {render} from 'react-dom'\nimport Lazy from 'react-lazyload'\nimport Rotation from 'react-rotation'\nimport Spinner from './components/Spinner'\n\nconst Image = ({height, src}) =\u003e (\n  \u003cLazy height={height} placeholder={\u003cSpinner /\u003e}\u003e\n    \u003cimg src={src} /\u003e\n  \u003c/Lazy\u003e\n)\n\nrender(\n  \u003cRotation\u003e\n    \u003cImage height={200} src='images/00.jpg' /\u003e\n    \u003cImage height={200} src='images/01.jpg' /\u003e\n    \u003cImage height={200} src='images/02.jpg' /\u003e\n    \u003cImage height={200} src='images/03.jpg' /\u003e\n  \u003c/Rotation\u003e,\n  document.querySelector('.container')\n)\n```\n\n## Related\n\n* [circlr][circlr] — animation rotation via scroll, mouse and touch events\n\n## License\n\nMIT\n\n[travis-url]: https://travis-ci.org/andrepolischuk/react-rotation\n[travis-image]: https://travis-ci.org/andrepolischuk/react-rotation.svg?branch=master\n\n[react]: https://github.com/facebook/react\n[circlr]: https://github.com/andrepolischuk/circlr\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrepolischuk%2Freact-rotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrepolischuk%2Freact-rotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrepolischuk%2Freact-rotation/lists"}