diff --git a/README.md b/README.md index c7ae1aa6810b2495da3abe963831483c1682e3c4..876d9daf2c9872e05e8bd183da04077762151ffe 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ <h1 align="center">Files ui</h1> 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. <div align="center"> @@ -15,9 +16,7 @@ UI components for file uploads with [React js](https://react.dev/). [](https://www.npmjs.com/package/@files-ui/react) [](https://kandi.openweaver.com/typescript/files-ui/files-ui-react) [](http://makeapullrequest.com) [](https://github.com/files-ui/react) -[](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) - - +[](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [](https://openbase.com/js/@files-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) </div> @@ -28,7 +27,6 @@ UI components for file uploads with [React js](https://react.dev/). </p> - :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) - :eyes: More previews [here](#more-previews). @@ -55,7 +53,8 @@ Here is a quick example to get you started, **it's all you need**: import * as React from "react"; import ReactDOM from "react-dom"; import { Dropzone, FileMosaic } from "@files-ui/react"; -Function App() { + +function App() { const [files, setFiles] = React.useState([]); const updateFiles = (incommingFiles) => { setFiles(incommingFiles); @@ -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: -- [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: | [](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) | +| Advanced Sample :hammer: | [](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) | + +## Main Components 💠-## Main Components - [\<Dropzone/\>](https://www.files-ui.com/components/dropzone) - [\<FileMosaic/\>](https://www.files-ui.com/components/filemosaic) - [\<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 - [\<FIleInputButton/\>](https://www.files-ui.com/components/fileinputbutton) - [\<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) -## More Previews +## More Previews :eyes: <details> <summary>Image full screen preview ðŸ–¼ï¸ </summary> diff --git a/package.json b/package.json index bec34c8787c5a8dcc1b68329669e4f3499cfbb5a..b9206064c5bc2f06da66dde41eb1ec32d5f7cde7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@files-ui/react", - "version": "1.0.5", + "version": "1.0.8", "description": "UI components for file uploads with React js", "main": "./build/index.js", "module": "./build/index.es.js",