Natural Potato Magnet

    openjscad-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-canary-07 • Public • Published

    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 🚀

    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 ❤️  by @aeksco

    Tweet

    Install

    npm i openjscad-react

    DownloadsWeekly Downloads

    18

    Version

    0.0.1-canary-07

    License

    MIT

    Unpacked Size

    51.3 kB

    Total Files

    24

    Last publish

    Collaborators

    • aeksco