Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aeksco/openjscad-react
:package: React.js component for the OpenJSCAD.org project
https://github.com/aeksco/openjscad-react
3d-printing jest openjscad prettier react storybook typescript
Last synced: 3 months ago
JSON representation
:package: React.js component for the OpenJSCAD.org project
- Host: GitHub
- URL: https://github.com/aeksco/openjscad-react
- Owner: aeksco
- License: mit
- Created: 2020-10-17T00:49:56.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-02T23:17:42.000Z (about 1 year ago)
- Last Synced: 2024-10-20T11:14:14.860Z (3 months ago)
- Topics: 3d-printing, jest, openjscad, prettier, react, storybook, typescript
- Language: TypeScript
- Homepage: https://aeksco.github.io/openjscad-react/
- Size: 17.7 MB
- Stars: 20
- Watchers: 4
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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
## Table of Contents
- [Quick Start](#quick-start)
- [Install](#install)
- [Usage](#usage)
- [Configuration](#configuration)
- [Developing](#developing)
- [Compatibility](#compatibility)
- [License](#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](https://github.com/aeksco/openjscad-react-next-starter).
## Install
Install `openjscad-react` with [Yarn](https://classic.yarnpkg.com/en/) or [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-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 (
);
}
```
If you're using a server-side rendered framework like Vercel's [Next.js](https://nextjs.org/), you will need to import the `OpenJSCAD` component using a [dynamic import](https://nextjs.org/docs/advanced-features/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 (
);
}
```
## Configuration
See the [Props Reference](/?path=/story/docs-getting-started-props-reference--page) for more details about Configuration
## Developing
Consult the [Contribution Guide](https://github.com/aeksco/openjscad-react/blob/main/CONTRIBUTING.md) 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](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/)
- [Jest](https://jestjs.io)
- [Eslint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [lodash.debounce](https://www.npmjs.com/package/lodash.debounce)
- [Tailwind CSS](https://tailwindcss.com)
## Misc. References
- [OpenJSCAD Homepage](https://openjscad.org)
- [OpenJSCAD API Reference](https://openjscad.org/dokuwiki/doku.php)
- [JSCAD User Group](https://openjscad.nodebb.com/)
### TODOs + Known Issues
- Publish 0.1.0 package
- Update `https://github.com/aeksco/openjscad-react-next-starter`
### License
Open source under the [MIT License](https://github.com/aeksco/openjscad-react/blob/main/LICENSE). Built with :heart: by [@aeksco](https://github.com/aeksco)
[](https://twitter.com/intent/tweet?text=https://github.com/aeksco/openjscad-react)