{"id":15297202,"url":"https://github.com/lijinke666/react-3d-gallery","last_synced_at":"2026-01-05T20:39:33.905Z","repository":{"id":74016914,"uuid":"100020838","full_name":"lijinke666/react-3d-gallery","owner":"lijinke666","description":"a react 3d gallery componet","archived":false,"fork":false,"pushed_at":"2020-07-01T17:19:37.000Z","size":552,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T12:59:04.027Z","etag":null,"topics":["componet","cover","css3","gallery","image","image-gallery-react","photo","react","webpack"],"latest_commit_sha":null,"homepage":"https://lijinke666.github.io/react-3d-gallery/","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/lijinke666.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-08-11T10:29:00.000Z","updated_at":"2020-06-05T07:06:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba52dc05-7370-403a-91c3-8ebb64cb5c85","html_url":"https://github.com/lijinke666/react-3d-gallery","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"55fd867c6a5e84f8e24d491a920de90400ea783a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-3d-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-3d-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-3d-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-3d-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lijinke666","download_url":"https://codeload.github.com/lijinke666/react-3d-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245467614,"owners_count":20620216,"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":["componet","cover","css3","gallery","image","image-gallery-react","photo","react","webpack"],"created_at":"2024-09-30T19:15:39.121Z","updated_at":"2026-01-05T20:39:33.872Z","avatar_url":"https://github.com/lijinke666.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-3d-gallery\na react 3d gallery component \n\n\n## Installation\n```\nnpm install react-3d-gallery --save\n```\n\n## Example\n### [Live Demo](https://lijinke666.github.io/react-3d-gallery/)\n```\ngit clone https://github.com/lijinke666/react-3d-gallery.git\n```\n```\nnpm run demo\n```\n\n```javascript\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport Gallery3d from \"react-3d-gallery\"\n\n\nconst cover = (id) =\u003e ({\n    href:\"https://www.github.com\",\n    cover: \"http://p1.music.126.net/PQsm4zVDlbCeNACgW1j3QA==/18831335650676452.jpg?param=400y400\",\n    mask: (\n        \u003cdiv className=\"photo-cover\"\u003e\n            \u003ch4 key=\"photo-title\" className=\"cover-title\"\u003etitle{id+1}\u003c/h4\u003e\n            \u003cp key=\"photo-content\" className=\"cover-content\"\u003econtent{id+1}\u003c/p\u003e\n        \u003c/div\u003e\n    ),\n\n})\nconst categories = [...new Array(8)].map((item, i) =\u003e { item = cover(i); return item })\n\nconst options = {\n    categories,\n    width: 400,\n    height: 400,\n    speed:1000,     \n    autoPlay: true,\n    autoPlaySpeed: 4000,\n    space: 20,\n    arrow: true,\n    backfaceVisibility: false\n}\n\nconst Demo = () =\u003e (\n    \u003cGallery3d {...options} style={{ \"margin\": \"50px auto\" }} /\u003e\n\n)\nReactDOM.render(\n    \u003cDemo /\u003e,\n    document.getElementById('root')\n)\n```\n\n### options\n--- \n- #### categories\n  - type : `Array`\n  - default : `300`\n  - explain : `gallery categories object[]`\n    - options.href : type : `String` `target href`\n    - options.cover : type : `String` `gallary cover`\n    - options.mask : type : `String | ReactNode` `gallary mask`\n- #### width\n  - type : `Number`\n  - default : `300`\n  - explain : `cover width (px)`\n- #### height\n  - type : `Number`\n  - default : `300`\n  - explain : `cover height (px)`\n- #### space\n  - type : `Number`\n  - default : `30`\n  - explain : `The time required to convert (ms)`\n- #### autoPlay\n  - type : `Boolean`\n  - default : `true`\n  - explain : `Whether to scroll automatically`\n- #### autoPlaySpeed\n  - type : `Number`\n  - default : `4000`\n  - explain : `auto play speed (ms)`\n- #### arrow\n  - type : `Boolean`\n  - default : `true`\n  - explain : `Whether to show the arrow of the gallery`\n- #### backfaceVisibility\n  - type : `Boolean`\n  - default : `true`\n  - explain : `Whether to show backface visibility of the gallery`\n ---\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Freact-3d-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flijinke666%2Freact-3d-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Freact-3d-gallery/lists"}