{"id":16773241,"url":"https://github.com/aeksco/openjscad-react","last_synced_at":"2025-03-21T23:34:23.447Z","repository":{"id":57315398,"uuid":"304768923","full_name":"aeksco/openjscad-react","owner":"aeksco","description":":package: React.js component for the OpenJSCAD.org project","archived":false,"fork":false,"pushed_at":"2023-12-02T23:17:42.000Z","size":18561,"stargazers_count":21,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-17T02:35:10.604Z","etag":null,"topics":["3d-printing","jest","openjscad","prettier","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://aeksco.github.io/openjscad-react/","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/aeksco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-10-17T00:49:56.000Z","updated_at":"2024-10-30T16:27:06.000Z","dependencies_parsed_at":"2024-10-21T17:47:22.931Z","dependency_job_id":null,"html_url":"https://github.com/aeksco/openjscad-react","commit_stats":{"total_commits":61,"total_committers":1,"mean_commits":61.0,"dds":0.0,"last_synced_commit":"b4f637df1ed15f180858ea861a8243d3adc45132"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fopenjscad-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fopenjscad-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fopenjscad-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fopenjscad-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeksco","download_url":"https://codeload.github.com/aeksco/openjscad-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244885403,"owners_count":20526292,"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":["3d-printing","jest","openjscad","prettier","react","storybook","typescript"],"created_at":"2024-10-13T06:45:10.463Z","updated_at":"2025-03-21T23:34:23.115Z","avatar_url":"https://github.com/aeksco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eopenjscad-react\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eReact.js component for rendering \u0026amp; exporting OpenJSCAD scripts\u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  Write an \u003ccode\u003eOpenJSCAD\u003c/code\u003e script and wire it up to some inputs to start exporting user-customizable designs\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- GitHub Stars --\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/aeksco/openjscad-react.svg?style=social\u0026label=Star\" alt=\"GitHub Stars\" /\u003e\n\n  \u003c!-- MIT License --\u003e\n  \u003cimg src=\"https://img.shields.io/apm/l/atomic-design-ui.svg\" alt=\"MIT License\" /\u003e\n\n  \u003c!-- Hit Count --\u003e\n  \u003cimg src=\"http://hits.dwyl.com/aeksco/openjscad-react.svg\" alt=\"Hit Count\" /\u003e\n\n  \u003c!-- PRs Welcome --\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat\" alt=\"Hit Count\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://aeksco.github.io/openjscad-react\"\u003e\n      Website\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://openjscad-react-next-starter.netlify.app\"\u003e\n      Example\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/aeksco/openjscad-react-next-starter\"\u003e\n      Next.js Starter Kit\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n![Demo Example](https://i.imgur.com/9NijaGj.png \"Demo Example\")\n\n## Table of Contents\n\n-   [Quick Start](#quick-start)\n-   [Install](#install)\n-   [Usage](#usage)\n-   [Configuration](#configuration)\n-   [Developing](#developing)\n-   [Compatibility](#compatibility)\n-   [License](#license)\n\n\u003chr/\u003e\n\n## Quick Start\n\nIf you want to jump right in with a working React app with `openjscad-react` installed, check out the [openjscad-react-nextjs-starter](https://github.com/aeksco/openjscad-react-next-starter).\n\n## Install\n\nInstall `openjscad-react` with [Yarn](https://classic.yarnpkg.com/en/) or [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm):\n\n```\nyarn add openjscad-react\n```\n\n```\nnpm install --save openjscad-react\n```\n\n## Usage\n\nImport the `OpenJSCAD` component in your React component and pass in a valid OpenJSCAD script:\n\n```tsx\nimport * as React from \"react\";\nimport { OpenJSCAD } from \"openjscad-react\";\n\nexport function MyComponent(props: { script: string }) {\n    return (\n        \u003cOpenJSCAD\n            className=\"grid grid-cols-1 w-full\"\n            jscadScript={props.script}\n        /\u003e\n    );\n}\n```\n\nIf you're using a server-side rendered framework like Vercel's [Next.js](https://nextjs.org/), you will need to import the `OpenJSCAD` component using a [dynamic import](https://nextjs.org/docs/advanced-features/dynamic-import):\n\n```tsx\nimport * as React from \"react\";\nimport dynamic from \"next/dynamic\";\nimport { ViewerProps } from \"openjscad-react\";\n\nconst OpenJSCAD: React.ComponentType\u003cViewerProps\u003e = dynamic(\n    () =\u003e\n        import(\"openjscad-react/dist/src/OpenJSCAD\").then(\n            (mod) =\u003e mod.OpenJSCAD,\n        ),\n    { ssr: false },\n);\n\nexport function MyComponent(props: { script: string }) {\n    return (\n        \u003cOpenJSCAD\n            className=\"grid grid-cols-1 w-full\"\n            jscadScript={props.script}\n        /\u003e\n    );\n}\n```\n\n## Configuration\n\nSee the [Props Reference](/?path=/story/docs-getting-started-props-reference--page) for more details about Configuration\n\n## Developing\n\nConsult the [Contribution Guide](https://github.com/aeksco/openjscad-react/blob/main/CONTRIBUTING.md) to get started :rocket:\n\n## Compatibility\n\nThe `openjscad-react` module is compatible with React v16.8+ and works with ReactDOM. Next.js is supported. React Native is not supported at this time.\n\n## Built with\n\n-   [React](https://reactjs.org)\n-   [TypeScript](https://www.typescriptlang.org/)\n-   [Storybook](https://storybook.js.org/)\n-   [Jest](https://jestjs.io)\n-   [Eslint](https://eslint.org/)\n-   [Prettier](https://prettier.io/)\n-   [lodash.debounce](https://www.npmjs.com/package/lodash.debounce)\n-   [Tailwind CSS](https://tailwindcss.com)\n\n## Misc. References\n\n-   [OpenJSCAD Homepage](https://openjscad.org)\n-   [OpenJSCAD API Reference](https://openjscad.org/dokuwiki/doku.php)\n-   [JSCAD User Group](https://openjscad.nodebb.com/)\n\n### TODOs + Known Issues\n\n-   Publish 0.1.0 package\n-   Update `https://github.com/aeksco/openjscad-react-next-starter`\n\n### License\n\nOpen source under the [MIT License](https://github.com/aeksco/openjscad-react/blob/main/LICENSE). Built with\u0026nbsp;:heart:\u0026nbsp; by [@aeksco](https://github.com/aeksco)\n\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/aeksco/openjscad-react.svg?style=social)](https://twitter.com/intent/tweet?text=https://github.com/aeksco/openjscad-react)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Fopenjscad-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeksco%2Fopenjscad-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Fopenjscad-react/lists"}