richard1320 / react-media-library Goto Github PK

React Media Library is a UI package similar to the WordPress' media library, but for React. It features file drag-and-drop as well as a library to select previously uploaded files.

Home Page: https://richard1320.github.io/React-Media-Library/

TypeScript 72.23% MDX 3.72% JavaScript 8.46% SCSS 15.59%

react reactjs drag-and-drop file-manager filemanager-ui filemanager react-dom

react-media-library's Introduction

React Media Library

Have you ever worked with WordPress? If not, count your blessings. :)

But seriously, using a CMS like WordPress does provide a lot of useful features. The feature I miss most as a MERN developer is the media library browser. All image fields are edited using a modal where you can select something previously uploaded or drag-and-drop new images from your file browser. Well, now you can have something similar for your React app.

Note: this only includes the UI; everybody's app is different, so I can't write your API connections for you.

Installation

Install it via npm in your project.

npm install react-media-library --save

Documentation / Examples

See Storybook.

react-media-library's People

Contributors

Stargazers

Watchers

react-media-library's Issues

Request for different colour schemes

Would it be possible to allow for the user to be able to pick a colour scheme for the media library.

Use uppy to upload

https://uppy.io/ is a nice file uploader with lots of features. It's awesome to integrate uppy.

Manually sorting order of multiple images

I like to request a feature if possible

The only feature this package is missing is something like the wordpress or wix media library, after selecting multiple images you are able to drag and drop the images in an order of choice.

Custom Card Example

I didn't find an example of the custom card to precisely follow. If you could put a working example, that would be really great.
Thank you for your time to create this package.

Kindly Update this Project.

Enable Unselection of Selected Files

Users are unable to unselect a file if it's the only one selected, once the sole selected file is unselected, the "Select file" button disappears. A possible solution is to track whether any file was selected before the media library open and base on that flag and if all selection was removed then display a "Remove file" button that trigger the filesSelectCallback function with an empty array.

No CSS styling applied to any component

When the modal is open, no css styles are applied to any of the elements, pure html, no css, even though installed react-bootstrap and react-dropzone.

Support for defaultProps will be removed from function components in a future major release.

ReactMediaLibrary.tsx component use defaultProps which is deprecated, can I make the change to use default parameters instead?

Warning: er: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at er (webpack-internal:///(ssr)/./node_modules/react-media-library/dist/esm/index.js:2154:60)

No way to clear selection i.e selected files

Media library selection is not cleared even if 'defaultSelectedItemIds' is set to an empty array.

I suggest adding an else block with setSelectedItems([]); in ReactMediaLibrary.tsx line no 17.
So, the updated useEffect hook will be

useEffect(() => {
		// Asset loads are sometimes async.
		// Need to check the default and reselect if either the file library list or default select list is updated.
		if (props.defaultSelectedItemIds?.length) {
			const filterDefaultSelected = props.fileLibraryList.filter((item) => props.defaultSelectedItemIds?.includes(item._id));
			setSelectedItems(filterDefaultSelected);
		} else {
			setSelectedItems([]);
		}
	}, [props.fileLibraryList, props.defaultSelectedItemIds]);

Please update it so selected items in ReactMediaLibrary can be cleared.

P.S. Nice component

Thanks