How I made a file downloader on React and posted it on npm

react-file-uploadify is a flexible and customizable React library for uploading drag-and-drop files. 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 create-react-library tool, which allows you to quickly and easily create a new React library. We used the following steps:

1. We have become a 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 publish

Installing my library

npm install --save react-file-uploadify

Using

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;

The main functionality

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

• File Types: You can specify the types of files that users can select.

• Limit on the number of files: You can set the minimum and maximum number of accepted files.

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

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

• Customization: The component is easily configurable by adding its own classes via props.

• Language: you can choose Russian or English interface language

Demonstration of the component

Why should I use react-file-uploadify?

This library provides a simple and elegant way to add file upload functionality to your React applications. Due 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 uploading files in their React applications.

Conclusion

I created a react library that has 500+ downloads in 5 days on npm. Using the create-react-library tool has greatly simplified the process of creating a new library, allowing you to focus on implementing the functionality, rather than configuring the project. Developing react-file-uploadify was a pleasant experience that allowed me to apply my knowledge of React and create a useful tool for other developers.