openjscad-react

React.js component for the OpenJSCAD.org project

Usage no npm install needed!

<script type="module">
  import openjscadReact from 'https://cdn.skypack.dev/openjscad-react';
</script>

README

openjscad-react

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

GitHub Stars MIT License Hit Count Hit Count

Demo Example

Table of Contents

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

Misc. References

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

Tweet