{"id":23338235,"url":"https://github.com/p5-wrapper/next","last_synced_at":"2025-04-07T05:09:31.068Z","repository":{"id":153612672,"uuid":"629966584","full_name":"P5-wrapper/next","owner":"P5-wrapper","description":"A NextJS specific library for the @P5-Wrapper/react project.","archived":false,"fork":false,"pushed_at":"2025-04-04T17:50:25.000Z","size":504,"stargazers_count":41,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T05:09:23.123Z","etag":null,"topics":["animation","component","creative-coding","graphics-programming","javascript","nextjs","p5","react","sketches","typescript"],"latest_commit_sha":null,"homepage":"","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/P5-wrapper.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":".github/SECURITY.md","support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-19T11:47:41.000Z","updated_at":"2025-04-04T17:50:28.000Z","dependencies_parsed_at":"2023-10-13T01:22:03.180Z","dependency_job_id":"91970914-f621-4fc4-8ecc-91e8dfb859b2","html_url":"https://github.com/P5-wrapper/next","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P5-wrapper%2Fnext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P5-wrapper%2Fnext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P5-wrapper%2Fnext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/P5-wrapper%2Fnext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/P5-wrapper","download_url":"https://codeload.github.com/P5-wrapper/next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595334,"owners_count":20963943,"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":["animation","component","creative-coding","graphics-programming","javascript","nextjs","p5","react","sketches","typescript"],"created_at":"2024-12-21T03:12:49.307Z","updated_at":"2025-04-07T05:09:31.050Z","avatar_url":"https://github.com/P5-wrapper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @P5-wrapper/next\n\n![@P5-wrapper/next](https://socialify.git.ci/p5-wrapper/next/image?description=1\u0026font=Rokkitt\u0026forks=1\u0026issues=1\u0026language=1\u0026logo=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F8%2F8e%2FNextjs-logo.svg\u0026name=1\u0026owner=1\u0026pattern=Floating%20Cogs\u0026pulls=1\u0026stargazers=1\u0026theme=Auto)\n\n\u003e **Note:**\n\u003e\n\u003e This library simply re-exports the [@P5-wrapper/react (react-p5-wrapper) component](https://github.com/P5-wrapper/react) as a NextJS dynamic component. Nothing more.\n\u003e\n\u003e For more in-depth information on the base component, check the documentation via [the @P5-wrapper/react (react-p5-wrapper) docs](https://github.com/P5-wrapper/react).\n\n## Installation\n\nTo install the component, run the following:\n\n```shell\n[npm|yarn|pnpm] [install|add] @p5-wrapper/next @p5-wrapper/react\n```\n\n## Usage\n\nThen to use the component in your NextJS project you can simply import like so:\n\n```tsx\nimport React from \"react\";\nimport { type Sketch } from \"@p5-wrapper/react\";\nimport { NextReactP5Wrapper } from \"@p5-wrapper/next\";\n\nconst sketch: Sketch = (p5) =\u003e {\n  p5.setup = () =\u003e p5.createCanvas(600, 400, p5.WEBGL);\n\n  p5.draw = () =\u003e {\n    p5.background(250);\n    p5.normalMaterial();\n    p5.push();\n    p5.rotateZ(p5.frameCount * 0.01);\n    p5.rotateX(p5.frameCount * 0.01);\n    p5.rotateY(p5.frameCount * 0.01);\n    p5.plane(100);\n    p5.pop();\n  };\n};\n\nexport default function Page() {\n  return \u003cNextReactP5Wrapper sketch={sketch} /\u003e;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp5-wrapper%2Fnext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp5-wrapper%2Fnext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp5-wrapper%2Fnext/lists"}