next-modal-pages-loader

next-modal-pages-loader

A CLI to dynamically import Next.js pages to be rendered inside a modal without losing navigation.

Note: This is a fork of the react-native-storybook CLI, made by elderfo.

Example:

Comming soon

How to use it

Install it and add the folder where your modal pages are located in, after run it, a new file with a Map with the following format will be generated:

const PageRoutes = new Map();

PageRoutes.set(<RegExp>, <Component>);

export default PageRoutes;

You can build a function which iterates over the map and evaluates each regex, to get the component

Installation

yarn add next-modal-pages-loader -D

Or

npm install next-modal-pages-loader --save-dev

Configuration

The pages to be rendered inside a modal, needs to follow the same structure than the Next.js pages.

Options

Setting	CLI Option	Type	Description	Default
searchDir	--searchDir	string or string[]	The directory or pages, relative to the project root, to search for files in.	Project root
outputFile	--outputFile	string	The output file that will be written. It is relative to the project directory.	./modalPages/routes.js
loaderDir	--loaderDir	string	The path to the loader file which will be rendered until the dynamically page is fully loaded	No loader
pattern	--pattern	string	The pattern of files to look at. It can be a specific file, or any valid glob. Note: if using the CLI, globs with **/*... must be escaped with quotes	./modalPages/pages/index.js
	--silent		Silences output. This option is not supported in the package.json file.

Note: When using the CLI, any of option passed will override the values in the package.json

package.json

{
  "name": "MyProject",
  "scripts": {
    "loadModalPages": "mploader"
  },
  "config": {
    "next-modal-pages-loader": {
      "searchDir": ["./modalPages/pages"],
      "loaderDir": "./modalPages/loaderComponent.jsx",
      "pattern": "**/*.js",
      "outputFile": "./modalPages/routes.js"
    }
  }
}

CLI

CLI can be accessed from a terminal

./node_modules/.bin/mploader <options>

or in package.json

{
  "scripts": {
    "loadModalPages": "mploader <options>"
  }
}

Note: When using a glob with **/* it is required to be wrapped in quotes