feat: use react.memo and allow custom css tag

[imranbarbhuiya]

This pr

• migrates to yarn v3
• uses React.memo for better perf
• allows passing custom jsx element for styling. This can also be used to pass a minified css.

partially fixes #74, #79

Minify CSS

Using @emotion/react

import NextNProgress from "nextjs-progressbar";
import { css, Global } from '@emotion/react';

const transformCSS = (cssString: string) => {
       const style = css`${cssString}`;
       return <Global styles={style} />
}

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress transformCSS={transformCSS}  />
      <Component {...pageProps} />;
    </>
  );
}

Without using any package

Create a css file with the following content.

nprogress.css

```css #nprogress { pointer-events: none; } #nprogress .bar { background: #29D; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29D, 0 0 5px #29D; opacity: 1; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29D; border-left-color: #29D; border-radius: 50%; -webkit-animation: nprogresss-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ```

And in _app.tsx

import NextNProgress from "nextjs-progressbar";
import 'path/to/nprogress.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress  transformCSS={() => <></>} />
      <Component {...pageProps} />;
    </>
  );
}

[apal21]

Need to update versioin in package.json

[imranbarbhuiya]

done

[DragoshDX]

it looks like that transformCSS prop is not available in the 0.0.15 release I see now that currently on the repo the version is 0.0.16, however uninstalling and re-installing@latest still downloads 0.0.15 while trying to force it on .16:

$ npm i nextjs-progressbar@0.0.16 npm ERR! code ETARGET npm ERR! notarget No matching version found for nextjs-progressbar@0.0.16.

[imranbarbhuiya]

0.0.16 isn't released yet.

[apal21]

@DragoshDX it is released now to npm.

[DragoshDX]

thank you for your work