react-optics-diagrams

React components for displaying optical design diagrams.

Currently the following diagrams are provided:

1. SpotDiagram - A single spot diagram for displaying the result of a geometrical ray trace
2. SpotDiagramGrid - A grid of spot diagrams, one for each combination of a design's wavelength and field point

Quickstart

Installation

npm install react-optics-diagrams

Use

Use the component diagrams like you would any other React component. For example, as a script:

// ...
const rayTraceResults: RayTraceResults = data;

const props = {
  rayTraceResults,
  wavelengths: [
    { value: 0.4861, units: 'µm' },
    { value: 0.5876, units: 'µm' },
    { value: 0.6563, units: 'µm' },
  ],
  fieldSpecs: [
    { value: 0.0, units: 'deg', type: 'angle' } as const,
    { value: 5.0, units: 'deg', type: 'angle' } as const,
  ],
};

ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
  <React.StrictMode>
    <SpotDiagramsGrid {...props} />
  </React.StrictMode>,
);

This will create a grid of spot diagrams that looks like the following, one for each field and wavelength combination.

Development

Demo

See the demo folder for examples.

Common Commands

# Run the demo on the development server
npm run dev

# Run tests
npm run test