Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-drag-drop-files
Advanced tools
Readme
Light and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
Install it from npm (using NPM).
npm i --save react-drag-drop-files
or:
yarn add react-drag-drop-files
Using react hooks just as simple as:
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
const fileTypes = ["JPG", "PNG", "GIF"];
function DragDrop() {
const [file, setFile] = useState(null);
const handleChange = (file) => {
setFile(file);
};
return (
<FileUploader handleChange={handleChange} name="file" types={fileTypes} />
);
}
export default DragDrop;
Option | Type | Description | value example |
---|---|---|---|
name | string | the name for your form (if exist) | "myFile" |
multiple | boolean | a boolean to determine whether the multiple files is enabled or not | true OR false - false by default |
label | string | the label (text) for your form (if exist) inside the uploading box - first word underlined | "Upload or drop a file right here" |
required | boolean | Conditionally set the input field as required | true or false |
disabled | boolean | this for disabled the input | true OR false |
hoverTitle | string | text appears(hover) when trying to drop a file | "Drop here" |
fileOrFiles | Array or File or null | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial | |
classes | string | string with the classes wished to add | "drop_area drop_zone" |
types | Array | array of strings with extensions to check and go throw | ['png', 'jpeg', ...] |
onTypeError | function | function that will be called only of error occurred related to type | (err) => console.log(err) |
children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (it will remove the default exist style) | <div><p>this is inside drop area</p></div> or just text |
maxSize | number | the maximum size of the file (number in mb) | 2 |
minSize | number | the minimum size of the file (number in mb) | 1 |
onSizeError | function | function that will be called only if error related to min or max size occurred | (file) => console.log(file) |
onDrop | function | function that will be called when the user drops file(s) on the drop area only | (file) => console.log(file) |
onSelect | function | function that will be called when the user selects file(s) on click the file area only | (file) => console.log(file) |
handleChange | function | function that will be called when the user selects or drops file(s) | (file) => console.log(file) |
onDraggingStateChange | function | function that will be called with the state of dragging | (dragging) => console.log(dragging) |
dropMessageStyle | CSS Properties | A CSS property to style the hover message | {backgroundColor: 'red'} |
FAQs
Light React Drag & Drop files and images library styled by styled-components
The npm package react-drag-drop-files receives a total of 53,381 weekly downloads. As such, react-drag-drop-files popularity was classified as popular.
We found that react-drag-drop-files demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.