nmp
next-modal-pages-loader
npm i next-modal-pages-loader
nmp

next-modal-pages-loader

An automatic dynamic page loader for Next.js

by Mariano Argañaras

1.0.0 (see all)License:MITTypeScript:Not Found
npm i next-modal-pages-loader
Readme

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.

Build Status Known Vulnerabilities codecov

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

SettingCLI OptionTypeDescriptionDefault
searchDir--searchDirstring or string[]The directory or pages, relative to the project root, to search for files in.Project root
outputFile--outputFilestringThe output file that will be written. It is relative to the project directory../modalPages/routes.js
loaderDir--loaderDirstringThe path to the loader file which will be rendered until the dynamically page is fully loadedNo loader
pattern--patternstringThe 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
--silentSilences 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

Downloads/wk

4

GitHub Stars

1

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

11
VersionTagPublished
1.0.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial