127 lines
2.5 KiB
Markdown
127 lines
2.5 KiB
Markdown
The hook fn doesn't set any styles on either of the prop fns (`getRootProps()`/`getInputProps()`).
|
|
|
|
### Using inline styles
|
|
|
|
```jsx harmony
|
|
import React, {useMemo} from 'react';
|
|
import {useDropzone} from 'react-dropzone';
|
|
|
|
const baseStyle = {
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: '20px',
|
|
borderWidth: 2,
|
|
borderRadius: 2,
|
|
borderColor: '#eeeeee',
|
|
borderStyle: 'dashed',
|
|
backgroundColor: '#fafafa',
|
|
color: '#bdbdbd',
|
|
outline: 'none',
|
|
transition: 'border .24s ease-in-out'
|
|
};
|
|
|
|
const focusedStyle = {
|
|
borderColor: '#2196f3'
|
|
};
|
|
|
|
const acceptStyle = {
|
|
borderColor: '#00e676'
|
|
};
|
|
|
|
const rejectStyle = {
|
|
borderColor: '#ff1744'
|
|
};
|
|
|
|
function StyledDropzone(props) {
|
|
const {
|
|
getRootProps,
|
|
getInputProps,
|
|
isFocused,
|
|
isDragAccept,
|
|
isDragReject
|
|
} = useDropzone({accept: {'image/*': []}});
|
|
|
|
const style = useMemo(() => ({
|
|
...baseStyle,
|
|
...(isFocused ? focusedStyle : {}),
|
|
...(isDragAccept ? acceptStyle : {}),
|
|
...(isDragReject ? rejectStyle : {})
|
|
}), [
|
|
isFocused,
|
|
isDragAccept,
|
|
isDragReject
|
|
]);
|
|
|
|
return (
|
|
<div className="container">
|
|
<div {...getRootProps({style})}>
|
|
<input {...getInputProps()} />
|
|
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
<StyledDropzone />
|
|
```
|
|
|
|
### Using styled-components
|
|
|
|
```jsx harmony
|
|
import React from 'react';
|
|
import {useDropzone} from 'react-dropzone';
|
|
import styled from 'styled-components';
|
|
|
|
const getColor = (props) => {
|
|
if (props.isDragAccept) {
|
|
return '#00e676';
|
|
}
|
|
if (props.isDragReject) {
|
|
return '#ff1744';
|
|
}
|
|
if (props.isFocused) {
|
|
return '#2196f3';
|
|
}
|
|
return '#eeeeee';
|
|
}
|
|
|
|
const Container = styled.div`
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-width: 2px;
|
|
border-radius: 2px;
|
|
border-color: ${props => getColor(props)};
|
|
border-style: dashed;
|
|
background-color: #fafafa;
|
|
color: #bdbdbd;
|
|
outline: none;
|
|
transition: border .24s ease-in-out;
|
|
`;
|
|
|
|
function StyledDropzone(props) {
|
|
const {
|
|
getRootProps,
|
|
getInputProps,
|
|
isFocused,
|
|
isDragAccept,
|
|
isDragReject
|
|
} = useDropzone({accept: {'image/*': []}});
|
|
|
|
return (
|
|
<div className="container">
|
|
<Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
|
|
<input {...getInputProps()} />
|
|
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
<StyledDropzone />
|
|
```
|