openjscad-react

!Demo Example

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:

`tsx
import * as React from "react";
import { OpenJSCAD } from "openjscad-react";

export function MyComponent(props: { script: string }) {
return (
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:

`tsx
import * as React from "react";
import dynamic from "next/dynamic";
import { ViewerProps } from "openjscad-react";

const OpenJSCAD: React.ComponentType = dynamic(
() =>
import("openjscad-react/dist/src/OpenJSCAD").then(
(mod) => mod.OpenJSCAD,
),
{ ssr: false },
);

export function MyComponent(props: { script: string }) {
return (
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

$3

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

$3

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