Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs #3570

Merged
merged 4 commits into from
Mar 19, 2024
Merged

Docs #3570

Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update MLP docs.
timvandijck committed Mar 18, 2024

Verified

This commit was signed with the committer’s verified signature.
timvandijck Tim Van Dijck
commit fb05bab1cec579fa9175bdc6f55d91579e1f596b
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ For more extensive examples, [see the pre-built UI components on GitHub](https:/

```jsx
import * as React from "react";
import { useMediaLibrary } from "media-library-pro-react";
import { useMediaLibrary } from "media-library-pro/media-library-pro-react";

export default function MediaLibraryAttachment() {
const {
Original file line number Diff line number Diff line change
@@ -47,7 +47,7 @@ For more extensive examples, [see the pre-built UI components on GitHub](https:/
</template>

<script>
import { MediaLibraryRenderless } from 'media-library-pro-vue2';
import { MediaLibraryRenderless } from "media-library-pro/media-library-pro-vue3";

export default{
components: { MediaLibraryRenderless },
Original file line number Diff line number Diff line change
@@ -53,38 +53,35 @@ _If you're developing a project where you don't have access to composer, you can

The components are located in `vendor/spatie/laravel-medialibrary-pro/resources/js` when you install the package through Composer. This makes for very long import statements, which you can clean up by adding some configuration to your Webpack/Laravel Mix configuration.

**laravel-mix >6**
## Setup Vite
If you are using Vite, your `vite.config.js` look something like this:

```js
// webpack.mix.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

mix.override((webpackConfig) => {
webpackConfig.resolve.modules = [
"node_modules",
__dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
];
}
```

**laravel-mix <6**

```js
// webpack.mix.js

mix.webpackConfig({
export default defineConfig({
resolve: {
modules: [
"node_modules",
__dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
],
alias: {
'media-library-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
}
},
plugins: [
laravel([
'resources/js/app.js',
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
```

This will force Webpack to look in `vendor/spatie/laravel-medialibrary-pro/resources/js` when resolving imports, and allows you to shorten your import to this:

```js
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
```

If you're using TypeScript, you will also have have to add this to your tsconfig:
@@ -108,8 +105,8 @@ The most basic components have a `name` prop. This name will be used to identify
```jsx
// MyImageUploader.jsx

import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
import { MediaLibraryCollection } from "media-library-pro-react-collection";
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
import { MediaLibraryCollection } from "media-library-pro/media-library-pro-react-collection";

export default function MyImageUploader() {
return (
@@ -188,7 +185,7 @@ See the [Validation rules section](#validation-rules) for a complete list of all
The components keep track of whether they're ready to be submitted, you can use this to disable a submit button while a file is still uploading or when there are frontend validation errors. This value can be tracked by passing a listener method to the `onIsReadyToSubmitChange` prop. If you submit a form while a file is uploading, Laravel will return a HTTP 500 error with an `invalid uuid` message.

```jsx
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";

function AvatarComponent() {
const [isReadyToSubmit, setIsReadyToSubmit] = useState(true);
@@ -332,7 +329,7 @@ When using the components in repository that uses Inertia, the setup is very sim

```jsx
import React, { useState } from "react";
import { MediaLibraryAttachment } from "media-library-pro-react-attachment";
import { MediaLibraryAttachment } from "media-library-pro/media-library-pro-react-attachment";
import { usePage } from "@inertiajs/inertia-react";
import { Inertia } from "@inertiajs/inertia";