{"id":15540940,"url":"https://github.com/thundermiracle/next-mui-helper","last_synced_at":"2025-04-13T21:41:22.189Z","repository":{"id":37735929,"uuid":"122710290","full_name":"thundermiracle/next-mui-helper","owner":"thundermiracle","description":"a high order component package for making a project with nextjs and material-ui easier. With layout and nprogress injection support.","archived":false,"fork":false,"pushed_at":"2023-01-04T23:25:30.000Z","size":1718,"stargazers_count":13,"open_issues_count":94,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T15:05:11.772Z","etag":null,"topics":["helper","high-order-component","hoc","layout","material-ui","mui","next-mui-helper","nextjs","nprogress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thundermiracle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-24T06:22:43.000Z","updated_at":"2022-01-30T09:57:36.000Z","dependencies_parsed_at":"2023-02-03T00:01:32.043Z","dependency_job_id":null,"html_url":"https://github.com/thundermiracle/next-mui-helper","commit_stats":null,"previous_names":["thundermiracle/nextjs-mui-helper"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundermiracle%2Fnext-mui-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundermiracle%2Fnext-mui-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundermiracle%2Fnext-mui-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundermiracle%2Fnext-mui-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thundermiracle","download_url":"https://codeload.github.com/thundermiracle/next-mui-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732483,"owners_count":21152852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["helper","high-order-component","hoc","layout","material-ui","mui","next-mui-helper","nextjs","nprogress"],"created_at":"2024-10-02T12:14:51.957Z","updated_at":"2025-04-13T21:41:22.167Z","avatar_url":"https://github.com/thundermiracle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003enext-mui-helper\u003c/h1\u003e\n\n[![npm version](https://badge.fury.io/js/next-mui-helper.svg)](https://badge.fury.io/js/next-mui-helper)\n[![Build Status](https://travis-ci.org/thundermiracle/next-mui-helper.svg)](https://travis-ci.org/thundermiracle/next-mui-helper)\n[![dependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/status.svg)](https://david-dm.org/thundermiracle/next-mui-helper)\n[![devDependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/dev-status.svg)](https://david-dm.org/thundermiracle/next-mui-helper?type=dev)\n[![peerDependencies Status](https://david-dm.org/thundermiracle/next-mui-helper/peer-status.svg)](https://david-dm.org/thundermiracle/next-mui-helper?type=peer)\n\n## Description\n\n***material-ui version support***\n\n| version | material-ui's version |\n|:---|:-------------:|\n| ~0.2.8 | material-ui@beta |\n| ~2.0.0 | @material-ui 1.0 ~ 3.9.4 |\n| 3.0.0~ | @material-ui 4.0.0 ~ |\n\nnext-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.\n\nThere are several steps to enable SSR in next.js with material-ui which may be little bit confusing for beginners to implement.\n\nThis package wraps those steps and you can achieve the goal with only `two` steps.\n\n## Used By\n\n* [next-boilerplate](https://github.com/thundermiracle/next-boilerplate) simple boilerplate of next.js. With material-ui, google analytics, customizable export, simple layout support.\n\n* [react-sunflower](https://github.com/thundermiracle/react-sunflower) drawing sunflower by using next.js.\n\n## Installation\n\nnext-mui-helper is available as an [npm package](https://www.npmjs.org/package/next-mui-helper).\n\n```sh\nnpm install --save next-mui-helper\n```\n\n## *!!Important!!* from next@9.0.0\n\nAs 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.\n\nSo you MUST use files in es6 folder and tell webpack to transpiled it in client.\n\n## Steps from next@9.0.0\n\n### Full example is *[here](/examples/es6)*\n\n1. use ES6 module in ```_document.js``` and ```_app.js```;\n\n    ```jsx\n    import { makeNextDocument } from 'next-mui-helper/es';\n\n    export default makeNextDocument();\n    ```\n\n    ```jsx\n    import { makeNextApp } from 'next-mui-helper/es';\n\n    export default makeNextApp();\n    ```\n\n1. include next-mui-helper in ```next.config.js``` for transpile(by using next-transpile-modules)\n\n    ```jsx\n    const withTM = require('next-transpile-modules');\n\n    module.exports = withTM({\n      transpileModules: ['next-mui-helper'],\n    });\n    ```\n\n## Steps until next@8.0.0\n\n1. Create _document.js in the pages folder.\n\n    ```jsx\n    import { makeNextDocument } from 'next-mui-helper';\n\n    export default makeNextDocument();\n    ```\n\n1. Create _app.js in the pages folder.\n\n    ```jsx\n    import { makeNextApp } from 'next-mui-helper';\n\n    export default makeNextApp();\n    ```\n\nThat's it! Want to inject your own theme? See following instructions.\n\n### About step2, without make a _app.js file, you also can inject theme by hoc.\n\n  ```jsx\n  import React from 'react';\n  import { withParts } from 'next-mui-helper';\n  import Button from '@material-ui/core/Button';\n\n  const Page1 = () =\u003e (\n    \u003cButton color=\"primary\"\u003e\n      Hello World\n    \u003c/Button\u003e\n  );\n\n  export default withParts()(Page1);\n  ```\n\n## Instructions\n\n#### You can import functions from next-mui-helper/es if ES6 is preferable.\n\n* **makeNextDocument**\n\n| No.   |      Parameter      |  Default | Description |\n|:---|:-------------:|:--------------|:-----------|\n| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |\n| 2 |  Document | ```next/document``` | |\n\n* **makeNextApp**\n\n| No.   |      Parameter      |  Default | Description |\n|:---|:-------------:|:--------------|:-----------|\n| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |\n| 2 |  layout | null | Layout component(like ```\u003cLayout\u003e{childrend}\u003c/Layout\u003e)``` |\n| 3 |  enable nprogress | false | enable progress bar made by [nprogress](https://github.com/rstacruz/nprogress) |\n| 4 |  enable CssBaseline | true | enable material-ui's default [CssBaseline](https://material-ui-next.com/style/css-baseline/) |\n| 5 |  App | ```next/app``` | |\n\n* **withParts**\n\n| No.   |      Parameter      |  Default | Description |\n|:---|:-------------:|:--------------|:-----------|\n| 1 |  muiTheme | ```{ palette: { primary: blue, secondary: pink, }, }``` | material-ui's theme object |\n| 2 |  layout | null | Layout component(like ```\u003cLayout\u003e{childrend}\u003c/Layout\u003e)``` |\n| 3 |  enable nprogress | false | enable progress bar made by [nprogress](https://github.com/rstacruz/nprogress) |\n| 4 |  enable CssBaseline | true | enable material-ui's default [CssBaseline](https://material-ui-next.com/style/css-baseline/) |\n\n* **withProgressBar**\n| No.   |      Parameter      |  Default | Description |\n|:---|:-------------:|:--------------|:-----------|\n| 1 |  BaseComponent |  | add NProgress bar to BaseComponent |\n\n* **useThemeManagerContext**\nhook for manage theme.\n\n| No.   |      Parameter      |  Default | Description |\n|:---|:-------------:|:--------------|:-----------|\n| 1 | |  | returns theme object and setTheme(theme). call setTheme(theme) to change the project's theme |\n\n* **withThemeManager**\nhoc to inject theme object and setTheme(theme) function\n\n* **deepCompareObj**\ndeep compare two objects, return _true_ if they're the same.\n\n## Examples\n\nYou can find some examples under the [./example](/examples) folder.\n\nOR\n\nOpen them in CodeSandbox:\n\n1. simple:　[[simple] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/simple)\n\n1. withTheme:　[[withTheme] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withTheme?module=%2Fsrc%2Fpages%2Findex.js)\n\n1. withThemeApp:　[[withThemeApp] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withThemeApp?module=%2Fsrc%2Fpages%2Findex.js)\n\n1. use ES6:　[[ES6] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/es6)\n\n1. withRedux:　[[withRedux] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/withRedux?module=%2Fsrc%2Fpages%2Findex.js)\n\n1. changeTheme:　[[changeTheme] in CodeSandbox](https://codesandbox.io/s/github/thundermiracle/next-mui-helper/tree/master/examples/changeTheme?module=%2Fsrc%2Fpages%2Findex.js)\n\n## License\n\nThis project is licensed under the terms of the\n[MIT license](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthundermiracle%2Fnext-mui-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthundermiracle%2Fnext-mui-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthundermiracle%2Fnext-mui-helper/lists"}