https://github.com/thundermiracle/next-mui-helper

a high order component package for making a project with nextjs and material-ui easier. With layout and nprogress injection support.
https://github.com/thundermiracle/next-mui-helper

helper high-order-component hoc layout material-ui mui next-mui-helper nextjs nprogress

Last synced: about 1 year ago
JSON representation

a high order component package for making a project with nextjs and material-ui easier. With layout and nprogress injection support.

Host: GitHub
URL: https://github.com/thundermiracle/next-mui-helper
Owner: thundermiracle
License: mit
Created: 2018-02-24T06:22:43.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-01-04T23:25:30.000Z (over 3 years ago)
Last Synced: 2025-04-13T15:05:11.772Z (about 1 year ago)
Topics: helper, high-order-component, hoc, layout, material-ui, mui, next-mui-helper, nextjs, nprogress
Language: JavaScript
Homepage:
Size: 1.64 MB
Stars: 13
Watchers: 1
Forks: 1
Open Issues: 94
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

          
next-mui-helper


[![npm version](https://badge.fury.io/js/next-mui-helper.svg)](https://badge.fury.io/js/next-mui-helper)

[![Build Status](https://travis-ci.org/thundermiracle/next-mui-helper.svg)](https://travis-ci.org/thundermiracle/next-mui-helper)

[![dependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/status.svg)](https://david-dm.org/thundermiracle/next-mui-helper)

[![devDependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/dev-status.svg)](https://david-dm.org/thundermiracle/next-mui-helper?type=dev)

[![peerDependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/peer-status.svg)](https://david-dm.org/thundermiracle/next-mui-helper?type=peer)

## Description

***material-ui version support***

| version | material-ui's version |

|:---|:-------------:|

| ~0.2.8 | material-ui@beta |

| ~2.0.0 | @material-ui 1.0 ~ 3.9.4 |

| 3.0.0~ | @material-ui 4.0.0 ~ |

next-mui-helper is a package for making a project with [next.js](https://github.com/zeit/next.js/) and [material-ui](https://github.com/mui-org/material-ui) easier.

There are several steps to enable SSR in next.js with material-ui which may be little bit confusing for beginners to implement.

This package wraps those steps and you can achieve the goal with only `two` steps.

## Used By

* [next-boilerplate](https://github.com/thundermiracle/next-boilerplate) simple boilerplate of next.js. With material-ui, google analytics, customizable export, simple layout support.

* [react-sunflower](https://github.com/thundermiracle/react-sunflower) drawing sunflower by using next.js.

## Installation

next-mui-helper is available as an [npm package](https://www.npmjs.org/package/next-mui-helper).

```sh

npm install --save next-mui-helper

```

## *!!Important!!* from next@9.0.0

As described [here](https://github.com/zeit/next.js/issues/8358#issuecomment-521387124), next.js@9 needs ES6 Class syntax in server side but transpiled one in client.

So you MUST use files in es6 folder and tell webpack to transpiled it in client.

## Steps from next@9.0.0

### Full example is *[here](/examples/es6)*

1. use ES6 module in ```_document.js``` and ```_app.js```;

    ```jsx

    import { makeNextDocument } from 'next-mui-helper/es';

    export default makeNextDocument();

    ```

    ```jsx

    import { makeNextApp } from 'next-mui-helper/es';

    export default makeNextApp();

    ```

1. include next-mui-helper in ```next.config.js``` for transpile(by using next-transpile-modules)

    ```jsx

    const withTM = require('next-transpile-modules');

    module.exports = withTM({

      transpileModules: ['next-mui-helper'],

    });

    ```

## Steps until next@8.0.0

1. Create _document.js in the pages folder.

    ```jsx

    import { makeNextDocument } from 'next-mui-helper';

    export default makeNextDocument();

    ```

1. Create _app.js in the pages folder.

    ```jsx

    import { makeNextApp } from 'next-mui-helper';

    export default makeNextApp();

    ```

That's it! Want to inject your own theme? See following instructions.

### About step2, without make a _app.js file, you also can inject theme by hoc.

  ```jsx

  import React from 'react';

  import { withParts } from 'next-mui-helper';

  import Button from '@material-ui/core/Button';

  const Page1 = () => (

    

      Hello World

    

  );

  export default withParts()(Page1);

  ```

## Instructions

#### You can import functions from next-mui-helper/es if ES6 is preferable.

* **makeNextDocument**

| No.   |      Parameter      |  Default | Description |

|:---|:-------------:|:--------------|:-----------|

| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |

| 2 |  Document | ```next/document``` | |

* **makeNextApp**

| No.   |      Parameter      |  Default | Description |

|:---|:-------------:|:--------------|:-----------|

| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |

| 2 |  layout | null | Layout component(like ```{childrend})``` |

| 3 |  enable nprogress | false | enable progress bar made by [nprogress](https://github.com/rstacruz/nprogress) |

| 4 |  enable CssBaseline | true | enable material-ui's default [CssBaseline](https://material-ui-next.com/style/css-baseline/) |

| 5 |  App | ```next/app``` | |

* **withParts**

| No.   |      Parameter      |  Default | Description |

|:---|:-------------:|:--------------|:-----------|

| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |

| 2 |  layout | null | Layout component(like ```{childrend})``` |

| 3 |  enable nprogress | false | enable progress bar made by [nprogress](https://github.com/rstacruz/nprogress) |

| 4 |  enable CssBaseline | true | enable material-ui's default [CssBaseline](https://material-ui-next.com/style/css-baseline/) |

* **withProgressBar**

| No.   |      Parameter      |  Default | Description |

|:---|:-------------:|:--------------|:-----------|

| 1 |  BaseComponent |  | add NProgress bar to BaseComponent |

* **useThemeManagerContext**

hook for manage theme.

| No.   |      Parameter      |  Default | Description |

|:---|:-------------:|:--------------|:-----------|

| 1 | |  | returns theme object and setTheme(theme). call setTheme(theme) to change the project's theme |

* **withThemeManager**

hoc to inject theme object and setTheme(theme) function

* **deepCompareObj**

deep compare two objects, return _true_ if they're the same.

## Examples

You can find some examples under the [./example](/examples) folder.

OR

Open them in CodeSandbox:

1. simple:　[[simple] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/simple)

1. withTheme:　[[withTheme] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withTheme?module=%2Fsrc%2Fpages%2Findex.js)

1. withThemeApp:　[[withThemeApp] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withThemeApp?module=%2Fsrc%2Fpages%2Findex.js)

1. use ES6:　[[ES6] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/es6)

1. withRedux:　[[withRedux] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withRedux?module=%2Fsrc%2Fpages%2Findex.js)

1. changeTheme:　[[changeTheme] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/changeTheme?module=%2Fsrc%2Fpages%2Findex.js)

## License

This project is licensed under the terms of the

[MIT license](/LICENSE).

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/thundermiracle/next-mui-helper

Awesome Lists containing this project

README

next-mui-helper