# react-stl-explorer

> An embeddable STL viewer for React applications

Latest version **0.2.0** (published 2023-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-stl-explorer
pnpm add react-stl-explorer
yarn add react-stl-explorer
bun add react-stl-explorer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-08-05 |
| First published | 2023-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | JMax45 |
| Maintainers | jmax45 |

## Links

- npm: https://www.npmjs.com/package/react-stl-explorer
- Repository: https://github.com/JMax45/react-stl-explorer
- Homepage: https://github.com/JMax45/react-stl-explorer#readme
- Issues: https://github.com/JMax45/react-stl-explorer/issues
- npm.io page: https://npm.io/package/react-stl-explorer

## Dependencies (5)

- [three](https://npm.io/package/three.md) ^0.155.0
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.4.0
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.4.0
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^6.4.0

## Recent versions

- 0.2.0 (latest) — 2023-08-05
- 0.1.1 — 2023-07-30
- 0.1.0 — 2023-07-30

## README

# react-stl-explorer

[![npm](https://img.shields.io/npm/v/react-stl-explorer?logo=npm)](https://www.npmjs.com/package/react-stl-explorer)

An embeddable STL viewer for React applications.

<img src="https://github.com/JMax45/react-stl-explorer/assets/36378436/eeba86cb-0a1d-48f1-a217-0f5fa7df998f" alt="viewer screenshot" width="600">

### Installation

Install the library via npm:

```bash
npm install react-stl-explorer
```

### Usage

Import the `StlExplorer` component and start using it in your React application:

```jsx
import React from 'react';
import StlExplorer from 'react-stl-explorer';

const MyComponent = () => {
  return (
    <div>
      <h1>My 3D Model Viewer</h1>
      <StlExplorer />
    </div>
  );
};

export default MyComponent;
```

#### StlExplorer props

| Prop Name         | Type             | Default | Description                                                                    |
| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------ |
| source            | `string \| File` |         | Specifies the source of the STL model to display in the viewer.                |
| showViewCube      | `boolean`        | `true`  | Controls the visibility of the ViewCube, an interactive 3D navigation tool.    |
| allowFullscreen   | `boolean`        | `true`  | Determines whether the viewer supports entering fullscreen mode.               |
| enableInteraction | `boolean`        | `true`  | Controls user interactions with the viewer, such as rotation and zooming.      |
| enableDragAndDrop | `boolean`        | `true`  | Allows users to drag and drop their own STL files into the viewer for loading. |

### Development

This library uses the Storybook environment for development. To start working on react-stl-explorer, follow these steps:

1. Clone this Git repository:

```bash
git clone https://github.com/JMax45/react-stl-explorer
cd react-stl-explorer
```

2. Install the dependencies:

```bash
npm install
```

3. Start the Storybook development server:

```bash
npm run storybook
```

Open your browser and navigate to `http://localhost:6006` to view the Storybook interface, where you can interact with the components.

### Future Customizability

Currently, react-stl-explorer acts as a simple STL viewer, allowing users to drag and drop their own STL files for visualization. In the future, you can expect additional options to tailor the behavior to suit your specific use cases.

### Contributing

Contributions are welcome! If you find any issues or want to enhance the library, please open a pull request.

### License

This project is licensed under the [MIT License](LICENSE).

---
_Source: https://npm.io/package/react-stl-explorer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._