diff --git a/README.md b/README.md index 85161d7..604bc35 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![Work In Progress](https://img.shields.io/badge/work_in_progress-red?style=for-the-badge) -[![NPM](https://nodei.co/npm/@oarepo%2Ffile-manager.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@oarepo%2Ffile-manager/) +[![NPM](https://nodei.co/npm/@oarepo%2Ffile-manager.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@oarepo%2Ffile-manager/) [![Version](https://img.shields.io/github/package-json/v/oarepo/file-management-dialog)](https://www.npmjs.com/package/@oarepo/file-manager) [![License](https://img.shields.io/github/license/oarepo/file-management-dialog)](https://github.com/oarepo/file-management-dialog/blob/main/LICENSE) ![Build Status](https://github.com/oarepo/file-management-dialog/actions/workflows/chromatic.yml/badge.svg) @@ -14,50 +14,48 @@ It uses [Uppy](https://uppy.io/) package to render uploader Dashboard, import fi 1. Create a new [React](https://react.dev/)/[Preact](https://preactjs.com/) app using [Vite](https://vitejs.dev/) or [Create React App](https://create-react-app.dev/). 2. Install the package: - ```bash - npm install @oarepo/file-manager + ```bash + npm install @oarepo/file-manager - # or + # or - yarn add @oarepo/file-manager - ``` + yarn add @oarepo/file-manager + ``` 3. Since this package uses Uppy, which includes Preact as its internal dependency, you have to install compatible version of Preact explicitly and, if using React in your existing project, you also need to [set up a Wrapper](https://swizec.com/blog/seamlessly-render-a-preact-component-in-a-react-project/) to seamlessly render Preact components inside a `div` container: - Install Preact: - ```bash - npm install preact@10.5.13 + Install Preact: - # or + ```bash + npm install preact@10.5.13 - yarn add preact@10.5.13 - ``` + # or - Wrapper example: (can be configured based on your needs) - ```jsx - // ReactWrapper.jsx - import React, { useEffect, useRef } from "react"; - import { h, render } from "preact"; + yarn add preact@10.5.13 + ``` - const ReactWrapper = ({ preactComponent, props }) => { + Wrapper example: (can be configured based on your needs) - const preactCompRef = useRef(); + ```jsx + // ReactWrapper.jsx + import React, { useEffect, useRef } from "react"; + import { h, render } from "preact"; - useEffect(() => { - render( - h( - preactComponent, - { ...props } - ), // Assuming 'data' is defined somewhere - preactCompRef.current - ); - }); + const ReactWrapper = ({ preactComponent, props }) => { + const preactCompRef = useRef(); - return
; - }; + useEffect(() => { + render( + h(preactComponent, { ...props }), // Assuming 'data' is defined somewhere + preactCompRef.current + ); + }); - export default ReactWrapper; - ``` + return
; + }; + + export default ReactWrapper; + ``` ## Usage @@ -102,8 +100,7 @@ const MyComponent = () => { }, }} debug = {false} - onSuccessfulUpload = {(files) => console.log("Successful uploads", files)} - onFailedUpload = {(files) => console.log("Failed uploads", files)} + onCompletedUpload = {(result) => console.log("Upload results:", result)} TriggerComponent = ({ onClick, ...props }) => (