React | Dropzone | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { Dropzone, DropzoneEvent } from '@optimus-web/core';
                                                        
                                                        const DropzoneComponent = () => {
                                                                const [state, setState] = useState<{ value: File[] | null }>({ value: null });
                                                                const handleChange = (_: DropzoneEvent, value: File[] | null) => setState({ value });
                                                        
                                                                return (
                                                                    <Dropzone label="label" name="files" accept=".jpg, .jpeg, .png" multiple value={state.value} onChange={handleChange} />
                                                                )
                                                        }

Name	Description	Type
value	The current files in the dropzone	File[] \| null
onChange	A function that handles changes in the dropzone, receiving the event and the new value	(event: DropzoneEvent, newValue: File[] \| null) => void
helper?	Optional helper text or element	ReactNode
uploadFilesText?	Optional text or element for the upload files prompt	ReactNode
error	An element to display error messages	ReactNode
multiple?	Optional boolean to allow multiple file uploads	boolean
filesAreNotSupportedErrorMessage?	Optional error message for unsupported files	ReactNode
multipleFileDropNotAllowedErrorMessage?	Optional error message for disallowed multiple file drops	ReactNode
maxFilesLimit?	Optional maximum number of files allowed	number
id?	The ID of the input element	string
accept?	The accepted file types	string
name?	The name of the input element	string
required?	Optional boolean to indicate if the dropzone is required	boolean
label?	Optional label text or element	ReactNode

Dropzone

Resources

Example

API