openjscad-react

Table of Contents

• Quick Start
• Install
• Usage
• Configuration
• Developing
• Compatibility
• License

Quick Start

If you want to jump right in with a working React app with openjscad-react installed, check out the openjscad-react-nextjs-starter.

Install

Install openjscad-react with Yarn or NPM:

yarn add openjscad-react

npm install --save openjscad-react

Usage

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}
        />
    );
}

Configuration

See the Props Reference for more details about Configuration

Developing

Consult the Contribution Guide to get started :rocket:

Compatibility

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.

Built with

• React
• TypeScript
• Storybook
• Jest
• Eslint
• Prettier
• lodash.debounce
• Tailwind CSS

Misc. References

• OpenJSCAD Homepage
• OpenJSCAD API Reference
• JSCAD User Group

TODOs + Known Issues

• Publish 0.1.0 package
• Update https://github.com/aeksco/openjscad-react-next-starter

License

Open source under the MIT License. Built with :heart:  by @aeksco