Skip to content
Snippets Groups Projects
Commit 14e982fb authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[REF]: Improve readme and update next version

parent b103d293
No related branches found
No related tags found
No related merge requests found
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<h1 align="center">Files ui</h1> <h1 align="center">Files ui</h1>
UI components for file uploads with [React js](https://react.dev/). UI components for file uploads with [React js](https://react.dev/).
**Files UI** is a complete library for handling files in the UI. You can validate and upload them. **Files UI** is a complete library for handling files in the UI. You can validate and upload them.
<div align="center"> <div align="center">
...@@ -15,9 +16,7 @@ UI components for file uploads with [React js](https://react.dev/). ...@@ -15,9 +16,7 @@ UI components for file uploads with [React js](https://react.dev/).
[![npm latest package](https://img.shields.io/npm/v/@files-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@files-ui/react) [![kandi X-Ray](https://kandi.openweaver.com/badges/xray.svg)](https://kandi.openweaver.com/typescript/files-ui/files-ui-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![npm latest package](https://img.shields.io/npm/v/@files-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@files-ui/react) [![kandi X-Ray](https://kandi.openweaver.com/badges/xray.svg)](https://kandi.openweaver.com/typescript/files-ui/files-ui-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub Repo stars](https://img.shields.io/github/stars/files-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/files-ui/react) [![GitHub Repo stars](https://img.shields.io/github/stars/files-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/files-ui/react)
[![Verified on Openbase](https://badges.openbase.com/js/verified/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge) [![Featured on Openbase](https://badges.openbase.com/js/featured/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge) [![Rate this package](https://badges.openbase.com/js/rating/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge) [![@files-ui/react Tutorials](https://badges.openbase.com/js/tutorials/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge) [![Verified on Openbase](https://badges.openbase.com/js/verified/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![Featured on Openbase](https://badges.openbase.com/js/featured/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![Rate this package](https://badges.openbase.com/js/rating/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![@files-ui/react Tutorials](https://badges.openbase.com/js/tutorials/@files-ui/react.svg?style=openbase&token=KU5M2S80RznhcbmWDtZx1m9n8DBAO49K6UOwwvd4KVs=)](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
</div> </div>
...@@ -29,7 +28,6 @@ UI components for file uploads with [React js](https://react.dev/). ...@@ -29,7 +28,6 @@ UI components for file uploads with [React js](https://react.dev/).
- :heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/dropzone-ui/dropzone-ui) :D - :heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/dropzone-ui/dropzone-ui) :D
- :zap: Enjoying @files-ui/react? [Please leave a short review on Openbase](https://openbase.com/js/@files-ui/react#rate) - :zap: Enjoying @files-ui/react? [Please leave a short review on Openbase](https://openbase.com/js/@files-ui/react#rate)
- :eyes: More previews [here](#more-previews). - :eyes: More previews [here](#more-previews).
...@@ -55,7 +53,8 @@ Here is a quick example to get you started, **it's all you need**: ...@@ -55,7 +53,8 @@ Here is a quick example to get you started, **it's all you need**:
import * as React from "react"; import * as React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@files-ui/react"; import { Dropzone, FileMosaic } from "@files-ui/react";
Function App() {
function App() {
const [files, setFiles] = React.useState([]); const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => { const updateFiles = (incommingFiles) => {
setFiles(incommingFiles); setFiles(incommingFiles);
...@@ -74,10 +73,13 @@ ReactDOM.render(<App />, document.querySelector("#app")); ...@@ -74,10 +73,13 @@ ReactDOM.render(<App />, document.querySelector("#app"));
Yes, it's really all you need to get started as you can see in these live and interactive demos: Yes, it's really all you need to get started as you can see in these live and interactive demos:
- [Basic sample](https://www.files-ui.com/usage#quick-start) :cake: | | |
- [Advanced sample](https://www.files-ui.com/usage#advanced-example) :hammer: | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Basic Sample :cake: | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) |
| Advanced Sample :hammer: | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) |
## Main Components 💠
## Main Components
- [\<Dropzone/\>](https://www.files-ui.com/components/dropzone) - [\<Dropzone/\>](https://www.files-ui.com/components/dropzone)
- [\<FileMosaic/\>](https://www.files-ui.com/components/filemosaic) - [\<FileMosaic/\>](https://www.files-ui.com/components/filemosaic)
- [\<FileCard/\>](https://www.files-ui.com/components/filecard) - [\<FileCard/\>](https://www.files-ui.com/components/filecard)
...@@ -85,11 +87,11 @@ Yes, it's really all you need to get started as you can see in these live and in ...@@ -85,11 +87,11 @@ Yes, it's really all you need to get started as you can see in these live and in
- [\<FIleInputButton/\>](https://www.files-ui.com/components/fileinputbutton) - [\<FIleInputButton/\>](https://www.files-ui.com/components/fileinputbutton)
- [\<FullScreen/\>](https://www.files-ui.com/components/fullscreen) Image and video - [\<FullScreen/\>](https://www.files-ui.com/components/fullscreen) Image and video
## Full Documentation ## Full Documentation 📚
You can find the complete documentation and demos for every component on [files-ui.com](https://www.files-ui.com) You can find the complete documentation and demos for every component on [files-ui.com](https://www.files-ui.com)
## More Previews ## More Previews :eyes:
<details> <details>
<summary>Image full screen preview 🖼️ </summary> <summary>Image full screen preview 🖼️ </summary>
......
{ {
"name": "@files-ui/react", "name": "@files-ui/react",
"version": "1.0.5", "version": "1.0.8",
"description": "UI components for file uploads with React js", "description": "UI components for file uploads with React js",
"main": "./build/index.js", "main": "./build/index.js",
"module": "./build/index.es.js", "module": "./build/index.es.js",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment