How I made a file loader in react and posted it on npm

react-file-uploadify is a flexible and customizable React library for drag-and-drop file uploading. Users can easily drag and drop files, delete selected files, and customize the component by adding their own classes via props. The library also provides the ability to set limits on the number of accepted files, their size and file types.

Creating a library template using npx create-react-library

To create this library we used the tool create-react-library, which makes it quick and easy to create a new React library. We used the following steps:

1. Installed create-react-library globally:

   npm install -g create-react-library

2. Created a new library using the command:

   npx create-react-library react-file-uploadify

3. The project structure was generated automatically, including the necessary files for library development

4. Publishing an npm package

   npm login
   npm publish

Installing my component

npm install --save react-file-uploadify

Usage

import { FileDropZone } from 'react-file-uploadify'
import 'react-file-uploadify/dist/index.css'
import React, { useState } from "react";
import myClassNames from './myClassNames.module.css'
const App = () => {
  const [files, setFiles] = useState([])
  const updateFiles = (incomingFiles) => {
  setFiles(incomingFiles);
  };
  return (
  <div style={{width:"600px", height:"300px", margin:"32px"}}>
    <FileDropZone
    onChange={updateFiles}
    maxFilesSizeInMb={2}
    acceptTypes={[".docx",".pdf",".jpg"]}
    haveFileList={true}
    multiple={true}
    minFiles={2}
    maxFiles={5}
    lang={"en"}
    classNames={{
    "file-drop-zone_box": myClassNames.myFileDropZoneBoxClass,
    "file-drop-zone_button": myClassNames.myButtonClass,
    "file-icon": myClassNames.myFileIconClass,
    "file-box": myClassNames.myFileBoxClass,
    "file-box__file-button": myClassNames.myFileButton
    }}
    />
  </div>
  );
}
export default App;

Main functionality

• Multiple file selection: Users can select multiple files at the same time.

• File types: You can set the file types that users can select.

• File limit: You can set the minimum and maximum number of files to be received.

• File size limit: It is possible to limit the total size of selected files.

• Displaying a list of selected files: You can display a list of selected files.

• Customization: The component is easily customizable by adding your own classes via props.

• Language: you can select Russian or English interface language

Component demo

Why use react-file-uploadify?

This component provides a simple and elegant way to add file upload functionality to your React applications. Thanks to the flexibility and customizability of the component, developers can easily integrate it into their projects and adapt it to their needs. It is recommended to use this library for those who need a convenient and powerful tool for loading files in their React applications.

Conclusion

I created a react component that had 250+ downloads on npm in 3 days. Using the tool create-react-library significantly simplified the process of creating a new library, allowing you to concentrate on implementing functionality rather than on setting up the project. Developing react-file-uploadify was an enjoyable experience that allowed me to apply my React knowledge and create a useful tool for other developers.