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.
Comming soon
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
yarn add next-modal-pages-loader -D
Or
npm install next-modal-pages-loader --save-dev
The pages to be rendered inside a modal, needs to follow the same structure than the Next.js pages.
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
{
"name": "MyProject",
"scripts": {
"loadModalPages": "mploader"
},
"config": {
"next-modal-pages-loader": {
"searchDir": ["./modalPages/pages"],
"loaderDir": "./modalPages/loaderComponent.jsx",
"pattern": "**/*.js",
"outputFile": "./modalPages/routes.js"
}
}
}
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