120 lines
2.1 KiB
Plaintext
120 lines
2.1 KiB
Plaintext
---
|
|
name: ModalProvider
|
|
route: customHooks/modalProvider
|
|
---
|
|
|
|
import { Props } from 'docz';
|
|
import { ModalProvider } from '@ohif/ui';
|
|
import ModalComponent from './ModalComponent.jsx';
|
|
|
|
# Modal Context Provider
|
|
|
|
This is a context provider that allow the application to share the modal
|
|
component across all application.
|
|
|
|
## ModalProvider
|
|
|
|
Properties:
|
|
|
|
<Props of={ModalProvider} />
|
|
|
|
Usage example:
|
|
|
|
```javascript
|
|
import { ModalProvider } from '@ohif/ui';
|
|
import YourModalComponent from 'your-modal-component';
|
|
|
|
const App = () => {
|
|
return (
|
|
<ModalProvider modal={YourModalComponent}>
|
|
/** You app content */
|
|
</ModalComponent>;
|
|
)
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
## useModal
|
|
|
|
Used for React Functional Components. Should be used in the body of the
|
|
functional component to get access to the context together with the `show/hide`
|
|
functions.
|
|
|
|
Usage example:
|
|
|
|
```javascript
|
|
import { withModal } from '@ohif/ui';
|
|
|
|
const SampleComponent = () => {
|
|
const { show, hide } = useModal();
|
|
|
|
const openModal = () => {
|
|
show({
|
|
content: <div> Modal Content </div>,
|
|
title: 'Modal title',
|
|
});
|
|
}
|
|
|
|
const closeModal = () => {
|
|
hide();
|
|
}
|
|
|
|
return (
|
|
<button onClick={openModal}>
|
|
Open modal
|
|
</button>
|
|
<button onClick={closeModal}>
|
|
Close modal
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default SampleComponent;
|
|
```
|
|
|
|
## withModal
|
|
|
|
Used for React Class Components. This function show receive a Component as a
|
|
property and this component will have access to the context through its own
|
|
properties.
|
|
|
|
Usage example:
|
|
|
|
```javascript
|
|
import { withModal } from '@ohif/ui';
|
|
import React from 'react';
|
|
|
|
class SampleComponent extends React.Component {
|
|
openModal() {
|
|
this.props.modal.show({
|
|
content: <div> Modal Content </div>,
|
|
title: 'Modal title',
|
|
});
|
|
}
|
|
|
|
closeModal() = {
|
|
this.props.modal.hide();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<button onClick={this.openModal}>
|
|
Open modal
|
|
</button>
|
|
<button onClick={this.closeModal}>
|
|
Close modal
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withModal(SampleComponent);
|
|
```
|
|
|
|
## Modal Properties
|
|
|
|
The Modal Properties that can be override are:
|
|
|
|
<Props of={ModalComponent} />
|