React.js component for rendering & exporting OpenJSCAD scripts
Write an
OpenJSCAD script and wire it up to some inputs to start exporting user-customizable designs
If you want to jump right in with a working React app with openjscad-react installed, check out the openjscad-react-nextjs-starter.
Install openjscad-react with Yarn or NPM:
yarn add openjscad-react
npm install --save openjscad-react
Import the OpenJSCAD component in your React component and pass in a valid OpenJSCAD script:
import * as React from "react";
import { OpenJSCAD } from "openjscad-react";
export function MyComponent(props: { script: string }) {
return (
<OpenJSCAD
className="grid grid-cols-1 w-full"
jscadScript={props.script}
/>
);
}If you're using a server-side rendered framework like Vercel's Next.js, you will need to import the OpenJSCAD component using a dynamic import:
import * as React from "react";
import dynamic from "next/dynamic";
import { ViewerProps } from "openjscad-react";
const OpenJSCAD: React.ComponentType<ViewerProps> = dynamic(
() =>
import("openjscad-react/dist/src/OpenJSCAD").then(
(mod) => mod.OpenJSCAD,
),
{ ssr: false },
);
export function MyComponent(props: { script: string }) {
return (
<OpenJSCAD
className="grid grid-cols-1 w-full"
jscadScript={props.script}
/>
);
}See the Props Reference for more details about Configuration
Consult the Contribution Guide to get started 🚀
The 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.
- Publish 0.1.0 package
- Update
https://github.com/aeksco/openjscad-react-next-starter
Open source under the MIT License. Built with :heart: by @aeksco
