FatSeaDragon
A Material UI Wrapper of OpenSeaDragon for React.js.
How to Install:
npm install fatseadragon
Dependencies:
OpenSeaDragon, React MUI, and Styled-Components.
NOT compatible with Typescript.
How to use:
FatSeaDragon requires 5 parameters as props:
- prefixUrl, a string specifying a folder which contains all the deep zoom image slices
- tileSources, a string specifying a direct Url to the dzi or json file that contains metadata about how to read the deep zoom image
- height: a string specifying how tall to render the viewer (it takes units such as vh)
- width: a string specifying how wide to render the viewer (it takes units such as vw)
- showNavigator: a boolean that indicates whether to show a small navigator
import * as React from 'react';
import { FatSeaDragon } from 'fatseadragon';
export default function App() {
return (
<>
<FatSeaDragon
prefixUrl="http://exampledomain.com/images/outputs/"
tileSources="http://exampledomain.com/images/outputs/testimage1.dzi"
height="50vh"
width="50vw"
showNavigator={true}
/>
</>
);
}
Roadmap:
- [ ] Add support for custom styling of controls
- [ ] Add support for auto-hide or hidden controls