react-viewerbase - GitLite

KO | EN

gitlite — search

#javascript #ai #typescript #llm #go #android #machine-learning #rust #deep-learning #macos #java #windows #ios #openai

react-viewerbase

(★ 87)

Core medical image viewer components built using React

File Explorer

Download Latest Version (.zip)

- config.yml
- - ---bug-report.md
  - ---feature-request.md
  - ---support-question.md
- extensions.json
- settings.json
- docz.css
- - compatibility.mdx
  - docs-settings.mdx
  - getting-started.mdx
  - index.html
  - introduction.mdx
  - NameSpace.js
  - styling-and-theming.mdx
  - translating.mdx
  - wrapper.js
  - wrapper.styl
- - index.js
- - index.js
- - LayoutManager.css
  - LayoutManager.js
  - LayoutPanelDropTarget.css
  - LayoutPanelDropTarget.js
- - ScrollableArea.js
  - ScrollableArea.styl
- - getScrollbarSize.js
  - LanguageProvider.js
  - styleProperty.js
  - throttled.js
  - viewerbaseDragDropContext.js
- - ExpandableToolMenu.js
  - ExpandableToolMenu.styl
  - PlayClipButton.js
  - PresetToggle.js
  - SimpleToolbarButton.js
  - toolbar-button.styl
  - Toolbar.js
  - ToolbarButton.js
  - ViewportErrorIndicator.js
  - ViewportLoadingIndicator.js
- index.js
- test.js
.all-contributorsrc
.babelrc
.editorconfig
.env
.eslintrc
.gitattributes
.gitignore
.nvmrc
.prettierrc
doczrc.js
LICENSE
netlify.toml
package.json
README.md
rollup.config.js
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> ⚠️ THIS REPOSITORY IS ARCHIVED ⚠️
> 
> Don't worry, it's still being actively developed, we've just moved 😅
>
> - New Repository: [OHIF/Viewers](https://github.com/OHIF/Viewers)
> - New Location: [OHIF/Viewers --> root/platform/ui/](https://github.com/OHIF/Viewers/tree/master/platform/ui)
>
> Related announcement: [🎉 From Many Repositories to a Monorepo 🤖](https://github.com/OHIF/Viewers/issues/768)

<div align="center">
  <h1>react-viewerbase</h1>

<p><strong>React Viewerbase is a collection of components and utilities</strong> that power OHIF's <a href="https://github.com/OHIF/Viewers">zero-footprint DICOM viewer</a>.</p>
</div>

<div align="center">
<a href="https://react.ohif.org/"><strong>Read The Docs</strong></a> |
<a href="https://react.ohif.org/contributing">Edit the docs</a>

</div>

<hr />

[![CircleCI][circleci-image]][circleci-url]
[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](https://raw.githubusercontent.com/OHIF/react-viewerbase/master/)
[![code style: prettier][prettier-image]][prettier-url]
[![semantic-release][semantic-image]][semantic-url]

[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

This set of "Medical Imaging Viewer" React components are maintained separately
to:

- Decouple presentation from business logic
- Test and develop components in isolation
- Provide well documented, reusable components
- Aid rapid application development for context specific viewers

## Install

> This component library is pre- v1.0. All realeases until a v1.0 have the
> possibility of introducing breaking changes. Please depend on an "exact"
> version in your projects to prevent issues caused by loose versioning.

For full installation instructions, be sure to check out our
[getting started](https://react.ohif.org/getting-started#installation) guide.

```bash
// with npm
npm i react-viewerbase --save-exact

// with yarn
yarn add react-viewerbase --exact
```

## Usage

```jsx
import React, { Component } from 'react';
import { LayoutButton } from 'react-viewerbase';

class Example extends Component {
  constructor(props) {
    super(props);

this.state = {
      selectedCell: {
        className: 'hover',
        col: 1,
        row: 1,
      },
    };
  }

render() {
    return (
      <LayoutButton
        selectedCell={this.state.selectedCell}
        onChange={cell => this.setState({ selectedCell: cell })}
      />
    );
  }
}
```

## Running Locally

_Restore dependencies after cloning:_

1. `cd react-viewerbase`
2. `yarn install`

_Develop w/ Hot Reloading:_

`yarn dev`

_Build for Production:_

`yarn build`

## Contributors ✨

Thanks goes to these wonderful people
([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table><tr><td align="center"><a href="https://github.com/swederik"><img src="https://avatars3.githubusercontent.com/u/607793?v=4" width="100px;" alt="Erik Ziegler"/><br /><sub><b>Erik Ziegler</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=swederik" title="Code">💻</a> <a href="#maintenance-swederik" title="Maintenance">🚧</a></td><td align="center"><a href="http://dannyrb.com/"><img src="https://avatars1.githubusercontent.com/u/5797588?v=4" width="100px;" alt="Danny Brown"/><br /><sub><b>Danny Brown</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=dannyrb" title="Code">💻</a> <a href="#maintenance-dannyrb" title="Maintenance">🚧</a></td><td align="center"><a href="https://github.com/galelis"><img src="https://avatars3.githubusercontent.com/u/2378326?v=4" width="100px;" alt="Gustavo André Lelis"/><br /><sub><b>Gustavo André Lelis</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=galelis" title="Code">💻</a> <a href="#maintenance-galelis" title="Maintenance">🚧</a></td><td align="center"><a href="https://github.com/maltempi"><img src="https://avatars3.githubusercontent.com/u/7017182?v=4" width="100px;" alt="Thiago Maltempi"/><br /><sub><b>Thiago Maltempi</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=maltempi" title="Code">💻</a></td><td align="center"><a href="https://www.linkedin.com/in/siliconvalleynextgeneration/"><img src="https://avatars0.githubusercontent.com/u/1230575?v=4" width="100px;" alt="Esref Durna"/><br /><sub><b>Esref Durna</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=EsrefDurna" title="Code">💻</a></td><td align="center"><a href="http://www.isomics.com"><img src="https://avatars0.githubusercontent.com/u/126077?v=4" width="100px;" alt="Steve Pieper"/><br /><sub><b>Steve Pieper</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=pieper" title="Code">💻</a></td><td align="center"><a href="http://www.biharck.com.br"><img src="https://avatars0.githubusercontent.com/u/1713255?v=4" width="100px;" alt="Biharck Araujo"/><br /><sub><b>Biharck Araujo</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=biharck" title="Code">💻</a></td></tr><tr><td align="center"><a href="https://rodrigoea.com/"><img src="https://avatars3.githubusercontent.com/u/1905961?v=4" width="100px;" alt="Rodrigo Antinarelli"/><br /><sub><b>Rodrigo Antinarelli</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=rodrigolabs" title="Code">💻</a></td><td align="center"><a href="https://github.com/jfmedeiros1820"><img src="https://avatars1.githubusercontent.com/u/2211708?v=4" width="100px;" alt="João Felipe de Medeiros Moreira"/><br /><sub><b>João Felipe de Medeiros Moreira</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=jfmedeiros1820" title="Code">💻</a></td><td align="center"><a href="https://github.com/jamesg1"><img src="https://avatars3.githubusercontent.com/u/3621147?v=4" width="100px;" alt="James Gosbell"/><br /><sub><b>James Gosbell</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=jamesg1" title="Code">💻</a></td><td align="center"><a href="https://github.com/evren217"><img src="https://avatars1.githubusercontent.com/u/4920551?v=4" width="100px;" alt="Evren Ozkan"/><br /><sub><b>Evren Ozkan</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=evren217" title="Code">💻</a></td><td align="center"><a href="https://github.com/zsaltzman"><img src="https://avatars1.githubusercontent.com/u/19156530?v=4" width="100px;" alt="Zach S."/><br /><sub><b>Zach S.</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=zsaltzman" title="Code">💻</a></td><td align="center"><a href="https://github.com/muakdogan"><img src="https://avatars0.githubusercontent.com/u/19971240?v=4" width="100px;" alt="Mete Ugur Akdogan"/><br /><sub><b>Mete Ugur Akdogan</b></sub></a><br /><a href="https://github.com/OHIF/react-viewerbase/commits?author=muakdogan" title="Code">💻</a></td></tr></table>

This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!

## Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._

### 🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

[**See Bugs**][bugs]

### 💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding
a 👍. This helps maintainers prioritize what to work on.

[**See Feature Requests**][requests-feature]

### ❓ Questions

For questions related to using the library, please visit our support community,
or file an issue on GitHub.

[Google Group][google-group]

## License

MIT © [OHIF](https://github.com/OHIF)

[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/react-viewerbase/blob/master/CONTRIBUTING.md
[circleci-image]: https://circleci.com/gh/OHIF/react-viewerbase.svg?style=svg
[circleci-url]: https://circleci.com/gh/OHIF/react-viewerbase
[prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
[prettier-url]: https://github.com/prettier/prettier
[npm-url]: https://npmjs.org/package/react-viewerbase
[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square
[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license-url]: LICENSE
[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release

[bugs]: https://github.com/OHIF/react-viewerbase/labels/bug
[requests-feature]: https://github.com/OHIF/react-viewerbase/labels/enhancement
[good-first-issue]: https://github.com/OHIF/react-viewerbase/labels/good%20first%20issue
[google-group]: https://groups.google.com/forum/#!forum/cornerstone-platform