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