{"id":16730991,"url":"https://github.com/ndyag/react-onepage","last_synced_at":"2025-04-10T11:13:09.995Z","repository":{"id":42202004,"uuid":"98640343","full_name":"NdYAG/react-onepage","owner":"NdYAG","description":"An implementation of fullpage slider.","archived":false,"fork":false,"pushed_at":"2024-09-06T09:23:46.000Z","size":853,"stargazers_count":6,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T10:05:52.195Z","etag":null,"topics":["fullpage","react","react-component","scroller"],"latest_commit_sha":null,"homepage":"https://rawgit.com/ndyag/react-onepage/master/demo/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NdYAG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2017-07-28T10:47:16.000Z","updated_at":"2023-11-11T20:07:56.000Z","dependencies_parsed_at":"2025-02-17T03:33:36.089Z","dependency_job_id":"29eb326b-ff1c-42d7-bde1-22d16d043498","html_url":"https://github.com/NdYAG/react-onepage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-onepage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-onepage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-onepage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-onepage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NdYAG","download_url":"https://codeload.github.com/NdYAG/react-onepage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208566,"owners_count":21065203,"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":["fullpage","react","react-component","scroller"],"created_at":"2024-10-12T23:35:27.091Z","updated_at":"2025-04-10T11:13:09.965Z","avatar_url":"https://github.com/NdYAG.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React OnePage Slider\n\nA fullpage slider for mobile based on rxjs.\n\n## Install\n\n```shell\nnpm install react-onepage\n```\n\n## API\n\n* pageIndex: number\n\n```js\nimport React, { Component } from 'react'\nimport Slider from 'react-onepage'\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cSlider pageCount={10}\u003e\n        {pageIndex =\u003e \u003cContent\u003e{pageIndex}\u003c/Content\u003e}\n      \u003c/Slider\u003e\n    )\n  }\n}\n```\n\n## Questions\n\n**1. I have elements with `position: fixed` inside each page**\n\nOnepage use `transform: translate` for animation, which doesn't coordinate well with `position: fixed`. You could keep those elements as siblings of `\u003cSlider /\u003e`.\n\n**2. I have elements with `overflow: scroll` inside each page**\n\nNested scroller might not be common case, but feel free to add an issue if you need it. Related implementation is under consideration.\n\n**3. Performance**\n\nThere is no need to render all pages every time. For forward \u0026 backward page navigation, only three pages are required. Empty other pages when they are not visible based on pageIndex in the children function.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Freact-onepage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndyag%2Freact-onepage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Freact-onepage/lists"}