Socket
Socket
Sign inDemoInstall

react-dropzone

Package Overview
Dependencies
Maintainers
2
Versions
176
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dropzone - npm Package Compare versions

Comparing version 10.0.0 to 10.0.1

28

examples/accept/README.md

@@ -13,4 +13,4 @@ By providing `accept` prop you can make the dropzone accept specific file types and reject the others.

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';

@@ -20,3 +20,3 @@ function Accept(props) {

accept: 'image/jpeg, image/png'
})
});

@@ -27,3 +27,3 @@ const acceptedFilesItems = acceptedFiles.map(file => (

</li>
))
));

@@ -34,3 +34,3 @@ const rejectedFilesItems = rejectedFiles.map(file => (

</li>
))
));

@@ -55,3 +55,3 @@ return (

</section>
)
);
}

@@ -69,4 +69,4 @@

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';

@@ -82,3 +82,3 @@ function Accept(props) {

accept: '.jpeg,.png'
})
});

@@ -92,3 +92,3 @@ return (

</div>
)
);
}

@@ -102,4 +102,4 @@

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';

@@ -115,3 +115,3 @@ function Accept(props) {

accept: 'image/jpeg, image/png'
})
});

@@ -125,3 +125,3 @@ return (

</div>
)
);
}

@@ -128,0 +128,0 @@

22

examples/basic/README.md

@@ -9,7 +9,7 @@ The `useDropzone` hook just binds the necessary handlers to create a drag 'n' drop zone.

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';
function Basic(props) {
const {acceptedFiles, getRootProps, getInputProps} = useDropzone()
const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

@@ -20,3 +20,3 @@ const files = acceptedFiles.map(file => (

</li>
))
));

@@ -34,3 +34,3 @@ return (

</section>
)
);
}

@@ -44,8 +44,8 @@

```jsx harmony
import React, {useState} from 'react'
import {useDropzone} from 'react-dropzone'
import React, {useState} from 'react';
import {useDropzone} from 'react-dropzone';
function Basic(props) {
const [disabled, setDisabled] = useState(true)
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({disabled})
const [disabled, setDisabled] = useState(true);
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({disabled});

@@ -56,3 +56,3 @@ const files = acceptedFiles.map(file => (

</li>
))
));

@@ -78,3 +78,3 @@ return (

</section>
)
);
}

@@ -81,0 +81,0 @@

14

examples/class-component/README.md
If you're still using class components, you can use the [`<Dropzone>`](https://react-dropzone.js.org/#components) component provided by the lib:
```jsx harmony
import React, {Component} from 'react'
import Dropzone from 'react-dropzone'
import React, {Component} from 'react';
import Dropzone from 'react-dropzone';
class Basic extends Component {
constructor() {
super()
super();
this.onDrop = (files) => {
this.setState({files})
}
};
this.state = {
files: []
}
};
}

@@ -23,3 +23,3 @@

</li>
))
));

@@ -41,3 +41,3 @@ return (

</Dropzone>
)
);
}

@@ -44,0 +44,0 @@ }

130

examples/events/README.md

@@ -6,4 +6,4 @@ Custom event handlers provided in `getRootProps()` (e.g. `onClick`), will be invoked before the dropzone handlers.

```jsx harmony
import React, {useCallback, useReducer} from 'react'
import {useDropzone} from 'react-dropzone'
import React, {useCallback, useReducer} from 'react';
import {useDropzone} from 'react-dropzone';

@@ -16,8 +16,8 @@ const initialEvtsState = {

files: []
}
};
function Events(props) {
const [state, dispatch] = useReducer(reducer, initialEvtsState)
const myRootProps = computeRootProps(state)
const createToggleHandler = type => () => dispatch({type})
const [state, dispatch] = useReducer(reducer, initialEvtsState);
const myRootProps = computeRootProps(state);
const createToggleHandler = type => () => dispatch({type});

@@ -27,6 +27,6 @@ const onDrop = useCallback(files => dispatch({

payload: files
}), [])
}), []);
const {getRootProps, getInputProps, isFocused} = useDropzone({onDrop})
const files = state.files.map(file => <li key={file.path}>{file.path}</li>)
const {getRootProps, getInputProps, isFocused} = useDropzone({onDrop});
const files = state.files.map(file => <li key={file.path}>{file.path}</li>);

@@ -45,3 +45,3 @@ const options = ['preventFocus', 'preventClick', 'preventKeyDown', 'preventDrag'].map(key => (

</div>
))
));

@@ -62,7 +62,7 @@ return (

</section>
)
);
}
function computeRootProps(state) {
const props = {}
const props = {};

@@ -73,7 +73,7 @@ if (state.preventFocus) {

onBlur: event => event.stopPropagation()
})
});
}
if (state.preventClick) {
Object.assign(props, {onClick: event => event.stopPropagation()})
Object.assign(props, {onClick: event => event.stopPropagation()});
}

@@ -85,6 +85,6 @@

if (event.keyCode === 32 || event.keyCode === 13) {
event.stopPropagation()
event.stopPropagation();
}
}
})
});
}

@@ -96,7 +96,7 @@

[evtName]: event => event.stopPropagation()
})
})
});
});
}
return props
return props;
}

@@ -106,17 +106,17 @@

if (state.preventClick && state.preventKeyDown && state.preventDrag) {
return `Dropzone will not respond to any events`
return `Dropzone will not respond to any events`;
} else if (state.preventClick && state.preventKeyDown) {
return `Drag 'n' drop files here`
return `Drag 'n' drop files here`;
} else if (state.preventClick && state.preventDrag) {
return `Press SPACE/ENTER to open the file dialog`
return `Press SPACE/ENTER to open the file dialog`;
} else if (state.preventKeyDown && state.preventDrag) {
return `Click to open the file dialog`
return `Click to open the file dialog`;
} else if (state.preventClick) {
return `Drag 'n' drop files here or press SPACE/ENTER to open the file dialog`
return `Drag 'n' drop files here or press SPACE/ENTER to open the file dialog`;
} else if (state.preventKeyDown) {
return `Drag 'n' drop files here or click to open the file dialog`
return `Drag 'n' drop files here or click to open the file dialog`;
} else if (state.preventDrag) {
return `Click/press SPACE/ENTER to open the file dialog`
return `Click/press SPACE/ENTER to open the file dialog`;
}
return `Drag 'n' drop files here or click/press SPACE/ENTER to open the file dialog`
return `Drag 'n' drop files here or click/press SPACE/ENTER to open the file dialog`;
}

@@ -130,3 +130,3 @@

preventFocus: !state.preventFocus
}
};
case 'preventClick':

@@ -136,3 +136,3 @@ return {

preventClick: !state.preventClick
}
};
case 'preventKeyDown':

@@ -142,3 +142,3 @@ return {

preventKeyDown: !state.preventKeyDown
}
};
case 'preventDrag':

@@ -148,3 +148,3 @@ return {

preventDrag: !state.preventDrag
}
};
case 'setFiles':

@@ -154,5 +154,5 @@ return {

files: action.payload
}
};
default:
return state
return state;
}

@@ -167,4 +167,4 @@ }

```jsx harmony
import React, {useCallback, useMemo, useReducer} from 'react'
import {useDropzone} from 'react-dropzone'
import React, {useCallback, useMemo, useReducer} from 'react';
import {useDropzone} from 'react-dropzone';

@@ -175,3 +175,3 @@ const initialParentState = {

child: {}
}
};

@@ -182,7 +182,7 @@ const parentStyle = {

border: '2px dashed #888'
}
};
const stateStyle = {
fontFamily: 'monospace'
}
};

@@ -194,12 +194,12 @@ const childStyle = {

border: '2px dashed #ccc'
}
};
function Parent(props) {
const [state, dispatch] = useReducer(parentReducer, initialParentState)
const {preventDrag} = state
const togglePreventDrag = useCallback(() => dispatch({type: 'preventDrag'}), [])
const dropzoneProps = useMemo(() => computeDropzoneProps({dispatch}, 'parent'), [dispatch])
const [state, dispatch] = useReducer(parentReducer, initialParentState);
const {preventDrag} = state;
const togglePreventDrag = useCallback(() => dispatch({type: 'preventDrag'}), []);
const dropzoneProps = useMemo(() => computeDropzoneProps({dispatch}, 'parent'), [dispatch]);
const {getRootProps} = useDropzone(dropzoneProps)
const {getRootProps} = useDropzone(dropzoneProps);

@@ -212,3 +212,3 @@ const childProps = useMemo(() => ({

dispatch
])
]);

@@ -239,3 +239,3 @@ return (

</section>
)
);
}

@@ -247,4 +247,4 @@

props.dispatch
])
const {getRootProps} = useDropzone(dropzoneProps)
]);
const {getRootProps} = useDropzone(dropzoneProps);
return (

@@ -256,3 +256,3 @@ <div

/>
)
);
}

@@ -267,3 +267,3 @@

preventDrag: !state.preventDrag
}
};
case 'onDragEnter':

@@ -273,5 +273,5 @@ case 'onDragOver':

case 'onDrop':
return computeDragState(action, state)
return computeDragState(action, state);
default:
return state
return state;
}

@@ -281,24 +281,24 @@ }

function computeDragState(action, state) {
const {type, payload} = action
const {node} = payload
const events = {...state[node]}
const {type, payload} = action;
const {node} = payload;
const events = {...state[node]};
if (type !== events.current) {
events.previous = events.current
events.previous = events.current;
}
events.current = type
events.current = type;
return {
...state,
[node]: events
}
};
}
function computeDropzoneProps(props, node) {
const rootProps = {}
const rootProps = {};
Array.from(['onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop']).forEach(type => {
['onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop'].forEach(type => {
Object.assign(rootProps, {
[type]: (...args) => {
const event = type === 'onDrop' ? args.pop() : args.shift()
const event = type === 'onDrop' ? args.pop() : args.shift();
if (props.preventDrag) {
event.stopPropagation()
event.stopPropagation();
}

@@ -308,8 +308,8 @@ props.dispatch({

payload: {node}
})
});
}
})
});
})
return rootProps
return rootProps;
}

@@ -316,0 +316,0 @@

12

examples/file-dialog/README.md

@@ -10,7 +10,7 @@ You can programmatically invoke the default OS file prompt; just use the `open` method returned by the hook.

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';
function Dropzone(props) {
const {getRootProps, getInputProps, open} = useDropzone()
const {getRootProps, getInputProps, open} = useDropzone();
const rootProps = getRootProps({

@@ -21,6 +21,6 @@ // Disable click and keydown behavior

if (event.keyCode === 32 || event.keyCode === 13) {
event.stopPropagation()
event.stopPropagation();
}
}
})
});

@@ -35,3 +35,3 @@ return (

</div>
)
);
}

@@ -38,0 +38,0 @@

25

examples/plugins/README.md

@@ -9,4 +9,4 @@ The hook accepts a `getFilesFromEvent` prop that enhances the handling of dropped file system objects and allows more flexible use of them e.g. passing a function that accepts drop event of a folder and resolves it to an array of files adds plug-in functionality of folders drag-and-drop.

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
import React from 'react';
import {useDropzone} from 'react-dropzone';

@@ -16,3 +16,3 @@ function Plugin(props) {

getFilesFromEvent: event => myCustomFileGetter(event)
})
});

@@ -23,3 +23,3 @@ const files = acceptedFiles.map(f => (

</li>
))
));

@@ -37,15 +37,20 @@ return (

</section>
)
);
}
async function myCustomFileGetter(event) {
const files = Array.from(event.dataTransfer ? event.dataTransfer.files : event.target.files);
const files = [];
const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files;
files.forEach(file => {
for (var i = 0; i < fileList.length; i++) {
const file = fileList.item(i);
Object.defineProperty(file, 'myProp', {
value: true
})
})
});
return files
files.push(file);
}
return files;
}

@@ -52,0 +57,0 @@

26

examples/previews/README.md

@@ -6,4 +6,4 @@ Starting with version 7.0.0, the `{preview}` property generation on the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects and the `{disablePreview}` property on the `<Dropzone>` have been removed.

```jsx harmony
import React, {useEffect, useState} from 'react'
import {useDropzone} from 'react-dropzone'
import React, {useEffect, useState} from 'react';
import {useDropzone} from 'react-dropzone';

@@ -15,3 +15,3 @@ const thumbsContainer = {

marginTop: 16
}
};

@@ -28,3 +28,3 @@ const thumb = {

boxSizing: 'border-box'
}
};

@@ -35,3 +35,3 @@ const thumbInner = {

overflow: 'hidden'
}
};

@@ -42,7 +42,7 @@ const img = {

height: '100%'
}
};
function Previews(props) {
const [files, setFiles] = useState([])
const [files, setFiles] = useState([]);
const {getRootProps, getInputProps} = useDropzone({

@@ -53,5 +53,5 @@ accept: 'image/*',

preview: URL.createObjectURL(file)
})))
})));
}
})
});

@@ -67,8 +67,8 @@ const thumbs = files.map(file => (

</div>
))
));
useEffect(() => () => {
// Make sure to revoke the data uris to avoid memory leaks
files.forEach(file => URL.revokeObjectURL(file.preview))
}, [files])
files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

@@ -85,3 +85,3 @@ return (

</section>
)
);
}

@@ -88,0 +88,0 @@

38

examples/styling/README.md

@@ -6,4 +6,4 @@ The hook fn doesn't set any styles on either of the prop fns (`getRootProps()`/`getInputProps()`).

```jsx harmony
import React, {useMemo} from 'react'
import {useDropzone} from 'react-dropzone'
import React, {useMemo} from 'react';
import {useDropzone} from 'react-dropzone';

@@ -17,3 +17,3 @@ const baseStyle = {

borderRadius: 5
}
};

@@ -24,3 +24,3 @@ const activeStyle = {

backgroundColor: '#eee'
}
};

@@ -30,3 +30,3 @@ const acceptStyle = {

borderColor: '#00e676'
}
};

@@ -36,3 +36,3 @@ const rejectStyle = {

borderColor: '#ff1744'
}
};

@@ -46,3 +46,3 @@ function StyledDropzone(props) {

isDragReject
} = useDropzone({accept: 'image/*'})
} = useDropzone({accept: 'image/*'});

@@ -57,3 +57,3 @@ const style = useMemo(() => ({

isDragReject
])
]);

@@ -65,3 +65,3 @@ return (

</div>
)
);
}

@@ -75,17 +75,17 @@

```jsx harmony
import React from 'react'
import {useDropzone} from 'react-dropzone'
const styled = require('styled-components').default
import React from 'react';
import {useDropzone} from 'react-dropzone';
import styled from 'styled-components';
const getColor = (props) => {
if (props.isDragAccept) {
return '#00e676'
return '#00e676';
}
if (props.isDragReject) {
return '#ff1744'
return '#ff1744';
}
if (props.isDragActive) {
return '#6c6'
return '#6c6';
}
return '#666'
return '#666';
}

@@ -101,3 +101,3 @@

background-color: ${props => props.isDragActive ? '#eee' : ''};
`
`;

@@ -111,3 +111,3 @@ function StyledDropzone(props) {

isDragReject
} = useDropzone({accept: 'image/*'})
} = useDropzone({accept: 'image/*'});

@@ -119,3 +119,3 @@ return (

</Container>
)
);
}

@@ -122,0 +122,0 @@

4

package.json

@@ -94,3 +94,3 @@ {

"attr-accept": "^1.1.3",
"file-selector": "^0.1.10",
"file-selector": "^0.1.11",
"prop-types": "^15.7.2"

@@ -169,3 +169,3 @@ },

},
"version": "10.0.0",
"version": "10.0.1",
"engines": {

@@ -172,0 +172,0 @@ "node": ">= 8"

dist/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc