63 lines
1.2 KiB
Text
63 lines
1.2 KiB
Text
import { Canvas, Meta } from '@storybook/blocks';
|
|
|
|
import * as ModalStories from './Modals.stories';
|
|
|
|
<Meta of={ModalStories} />
|
|
|
|
# Modals
|
|
|
|
## Before start
|
|
|
|
### In root application use
|
|
|
|
```tsx
|
|
import Modals from '@procyon/components/Modal/components/Modals';
|
|
import { ModalWrapper } from '@procyon/components/Modal/context';
|
|
|
|
return (
|
|
<ModalWrapper>
|
|
...
|
|
<Modals />
|
|
</ModalWrapper>
|
|
);
|
|
```
|
|
|
|
## Use `AddModalButton`
|
|
|
|
```tsx
|
|
import { AddModalButton } from '@procyon/components/Modal/components/AddModalButton';
|
|
|
|
return <AddModalButton />;
|
|
```
|
|
|
|
<Canvas of={ModalStories.Default} withToolbar className='h-80' />
|
|
|
|
## Use hook `useModal()`
|
|
|
|
```tsx
|
|
import { useModal } from '@procyon/components/Modal/useModal';
|
|
|
|
const [openModal] = useModal({
|
|
component: <div>Modal content</div>,
|
|
id: 'modal1',
|
|
props: { onClick: () => {} },
|
|
style: { width: '300px' },
|
|
title: 'Modal Title',
|
|
});
|
|
|
|
openModal();
|
|
```
|
|
|
|
<Canvas of={ModalStories.Hook} withToolbar className='h-80' />
|
|
|
|
## Use function `openModal()`
|
|
|
|
Outside of React component.
|
|
|
|
```ts
|
|
import { openModal } from '@procyon/components/Modal/context';
|
|
|
|
openModal('modal1');
|
|
```
|
|
|
|
<Canvas of={ModalStories.OutsideReact} withToolbar className='h-80' />
|