react-import-folder v1.0.3

react-import-folder

About The Project

Import image folders into React projects: Turn a folder with images into a js file that contains all of the import lines, as well as an array object of all of the images and their filenames (the filename part is useful if the files are already correctly named and you wish to use the names).

I have had to work on projects that involve many countless images, and importing them is very tedious for these reasons:

• Having to type out all of the import statements for each image.
• Image names containing forbidden variable name characters, such as spaces or periods, so that I cant simply name the variable the same as the filename to cut on time importing.
• Having to tediously create the array object that uses these imports.

I then made this package to end the pain. (This was the original intent of programming!!)

Getting Started

Assumptions the package makes:

1. The "display name" feature assumes that the filenames contain the working display name that you wish to use. If you dont need the filenames at all, it doesnt matter what they are named in that case.

Installation

3. Install NPM package globally

   npm install -g react-import-folder

Usage

1. cd into the folder that contains the react.js file you wish to import images into.

   cd ~/myprojects/myreactproject/src/etc

2. Then, type: replace with your actual relative path to the images folder

   react-import-folder ./relative/path/to/images

3. By default, it only looks for image files in the directory you point it to. If you want it to also search sub-directories, add the 'all' flag. It will add all images found in subdirectories to the array, and you can use the image object "folder" value to differentiate.

   react-import-folder ./relative/path/to/images all

This will create a new js file in the current directory called imgImports.js with all the imports filled in, as well as an array of objects that contain all the images, their display name, and the folder location they are in. Then, simply import the array object into your react js file that needs the images.

Roadmap

1. The package assumes that the image files are named with their correct intended display names such as Bruce Wayne.png (if you intend on using the display name at all). I will add support for dealing with badly named assets such as _bruce-wayne.png.

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

oscadev- oscadev@protonmail.com

Project Link: https://github.com/oscadev/react-import-folder