76 lines
1.9 KiB
Plaintext
76 lines
1.9 KiB
Plaintext
|
---
|
||
|
|
name: Introduction
|
||
|
|
route: /
|
||
|
|
---
|
||
|
|
|
||
|
|
import { Playground, Props } from 'docz'
|
||
|
|
import { State } from 'react-powerplug'
|
||
|
|
import { TableList, TableListItem } from './../index.js'
|
||
|
|
|
||
|
|
# Introduction
|
||
|
|
|
||
|
|
**React Viewerbase is a collection of components and utilities** that power
|
||
|
|
OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
||
|
|
([demo][demo-url]). We maintain them as a separate component library 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
|
||
|
|
|
||
|
|
## Quick Example
|
||
|
|
|
||
|
|
> 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.
|
||
|
|
|
||
|
|
```js
|
||
|
|
// Add 'react-viewerbase' as a dependency
|
||
|
|
yarn add react-viewerbase
|
||
|
|
|
||
|
|
// Import and use components
|
||
|
|
import { TableList } from 'react-viewerbase'
|
||
|
|
```
|
||
|
|
|
||
|
|
<Playground>
|
||
|
|
<State
|
||
|
|
initial={{
|
||
|
|
selectedIndex: null,
|
||
|
|
listItems: [
|
||
|
|
{ label: 'Brain Left' },
|
||
|
|
{ label: 'Brain Right' },
|
||
|
|
{ label: 'Heart Left' },
|
||
|
|
{ label: 'Heart Right' },
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{({ state, setState }) => (
|
||
|
|
<TableList headerTitle="Example Table List Header">
|
||
|
|
{state.listItems.map((item, index) => {
|
||
|
|
return (
|
||
|
|
<TableListItem
|
||
|
|
key={`item_${index}`}
|
||
|
|
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
||
|
|
itemIndex={index}
|
||
|
|
onItemClick={() => alert('item clicked')}
|
||
|
|
>
|
||
|
|
<label>{item.label}</label>
|
||
|
|
</TableListItem>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</TableList>
|
||
|
|
)}
|
||
|
|
</State>
|
||
|
|
</Playground>
|
||
|
|
|
||
|
|
## FAQ
|
||
|
|
|
||
|
|
...
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Links
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- prettier-ignore-start -->
|
||
|
|
[demo-url]: https://docs.ohif.org/demo/
|
||
|
|
<!-- prettier-ignore-end -->
|