# react-molviewer

A React component for displaying molecules using JSmol.

[![npm version](https://img.shields.io/npm/v/react-molviewer)](https://www.npmjs.com/package/react-molviewer) [![Downloads](https://img.shields.io/npm/dm/react-molviewer)](https://www.npmjs.com/package/react-molviewer)

## How to use

Find out more information: [React-MolViewer](https://cllde8.github.io/react-molviewer/)

## Development

This project uses [Vite](https://vitejs.dev/) for fast development and optimized builds.

### Prerequisites

- Node.js >= 20.0.0 < 25.0.0
- Yarn package manager

### Getting Started

```bash
# Install dependencies
yarn install

# Start development server (http://localhost:8080)
yarn start

# Build library for production (outputs both ESM and UMD formats)
yarn build

# Build demo application
yarn build:demo

# Preview production build
yarn preview
```

### Environment Variables

Environment variables should be prefixed with `VITE_` to be exposed to the application.

Copy `.env.example` to `.env` and configure as needed:

```bash
cp .env.example .env
```

Access variables in code using `import.meta.env.VITE_*`

### Build Outputs

The library build produces two module formats:
- **ESM** (`dist/react-molviewer.es.js`) - Modern ES modules, tree-shakeable
- **UMD** (`dist/react-molviewer.umd.js`) - Universal module for broader compatibility

## Contact Us

If you have any questions or suggestions, please contact the contributors:

* [Paggy Huang](mailto:paggy.huang@gmail.com)
* [Claire Lin](mailto:lclaire@gmail.com)

## Thank you JSmol

[Jmol: an open-source Java viewer for chemical structures in 3D. http://www.jmol.org/](http://www.jmol.org/)