49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: Installation and setup
|
||
|
|
description: Add Media, register its catalog, and connect the storage adapter.
|
||
|
|
order: 10
|
||
|
|
toc:
|
||
|
|
- id: add-the-package
|
||
|
|
title: Add the package
|
||
|
|
- id: register-styles-and-catalogs
|
||
|
|
title: Register styles and catalogs
|
||
|
|
- id: provide-media
|
||
|
|
title: Provide media
|
||
|
|
---
|
||
|
|
|
||
|
|
## Add the package {#add-the-package}
|
||
|
|
|
||
|
|
Add Media to the consuming application:
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"dependencies": {
|
||
|
|
"@workspace/media": "workspace:*"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Register styles and catalogs {#register-styles-and-catalogs}
|
||
|
|
|
||
|
|
Import the stylesheet once so Tailwind includes utilities used by the package:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import "@workspace/media/globals.css";
|
||
|
|
```
|
||
|
|
|
||
|
|
Add `@workspace/media/locales/{locale}` to the application's internationalization catalog sources.
|
||
|
|
|
||
|
|
## Provide media {#provide-media}
|
||
|
|
|
||
|
|
Mount the adapter once around every media surface that should share storage behavior and notifications:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { MediaLibrary, MediaProvider } from "@workspace/media"
|
||
|
|
|
||
|
|
;<MediaProvider adapter={mediaAdapter} notify={showNotice}>
|
||
|
|
<MediaLibrary />
|
||
|
|
</MediaProvider>
|
||
|
|
```
|
||
|
|
|
||
|
|
The optional `notify` callback turns operation results into the application's toast or notification system.
|