Files ui

UI components for file uploads with React js.

Files UI is a complete library for handling files in the UI. You can validate and upload them.

- :heart: it ?, support us by giving a :star: on :octocat: Github :D

- :zap: Enjoying @files-ui/react? Please leave a short review on Openbase
- :eyes: More previews here.

Installation

@files-ui/react is available as an npm package.

``sh
// with npm
npm i @files-ui/react
`

`sh
// with yarn
yarn add @files-ui/react
`

Usage and examples

Here is a quick example to get you started, it's all you need:

`jsx
import * as React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@files-ui/react";

function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
setFiles(incommingFiles);
};
return (

{files.map((file) => (

))}

);
}

ReactDOM.render(, document.querySelector("#app"));
``

Yes, it's really all you need to get started as you can see in these live and interactive demos:

| | |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Basic Sample :cake: |  |
| Advanced Sample :hammer: |  |

Main Components 💠

- \
- \
- \
- \
- \
- \ Image and video

Full Documentation 📚

You can find the complete documentation and demos for every component on files-ui.com

More Previews :eyes:

Image full screen preview 🖼️

Video full screen preview 🎞️

FileCard, FileInputButton and Avatar preview 🎴

DarkMode 🌙 🌞

Supporters

Special thanks to these amazing people :star: :

$3


$3


License

This project is licensed under the terms of the
MIT license.