# next-modal-pages-loader

> A CLI to dynamically import [Next.js](https://github.com/vercel/next.js) pages to be rendered inside a modal without losing navigation.

Latest version **1.0.0** (published 2020-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-modal-pages-loader
pnpm add next-modal-pages-loader
yarn add next-modal-pages-loader
bun add next-modal-pages-loader
```

Provides the command `mploader`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-06-04 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Marian Argañaras |
| Maintainers | mariano.arg |

## Links

- npm: https://www.npmjs.com/package/next-modal-pages-loader
- Repository: https://github.com/MarianoArg/next-modal-pages-loader
- Homepage: https://github.com/MarianoArg/next-modal-pages-loader#readme
- Issues: https://github.com/MarianoArg/next-modal-pages-loader/issues
- npm.io page: https://npm.io/package/next-modal-pages-loader

## Dependencies (4)

- [glob](https://npm.io/package/glob.md) ^7.1.1
- [yargs](https://npm.io/package/yargs.md) ^14.0.0
- [colors](https://npm.io/package/colors.md) ^1.1.2
- [findup](https://npm.io/package/findup.md) ^0.1.5

## Recent versions

- 1.0.0 (latest) — 2020-06-04
- 1.0.0-development — 2020-06-01

## README

# next-modal-pages-loader
A CLI to dynamically import [Next.js](https://github.com/vercel/next.js) pages to be rendered inside a modal without losing navigation.

_Note:_ This is a fork of the [react-native-storybook](https://github.com/storybooks/react-native-storybook) CLI, made by [elderfo](https://github.com/elderfo).

[![Build Status](https://travis-ci.org/MarianoArg/next-modal-pages-loader.svg?branch=master)](https://travis-ci.org/MarianoArg/next-modal-pages-loader) [![Known Vulnerabilities](https://snyk.io/test/github/MarianoArg/next-modal-pages-loader/badge.svg)](https://snyk.io/test/github/MarianoArg/next-modal-pages-loader)
[![codecov](https://codecov.io/gh/MarianoArg/next-modal-pages-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/MarianoArg/next-modal-pages-loader)

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) with the following format will be generated:

```json 
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

```bash
yarn add next-modal-pages-loader -D
```

Or

```bash
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](https://nextjs.org/docs/basic-features/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`

```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 
```bash
./node_modules/.bin/mploader <options>
```
or in package.json 
```json
{
  "scripts": {
    "loadModalPages": "mploader <options>"
  }
}
```

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

---
_Source: https://npm.io/package/next-modal-pages-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._