This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/style-nextjs.

    cf-style-nextjs

    1.1.24 • Public • Published

    cf-style-nextjs

    Cloudflare Style Next.js integration

    This package provides a simple integration of Cloudflare styles (based on Fela) into Next.js framework.

    Usage

    $ npm install cf-style-nextjs

    Your /pages/_document.js should look similar to this:

    import Document, { Head, Main, NextScript } from 'next/document';
    import { getInitialProps, getStyles } from 'cf-style-nextjs';
     
    export default class MyDocument extends Document {
      static getInitialProps = getInitialProps();
      render() {
        return (
          <html>
            <Head>{getStyles(this.props)}</Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </html>
        );
      }
    }

    and all your pages should be wrapped by <StyleProvider />:

    import { StyleProvider } from 'cf-style-nextjs';
    import { Button } from 'cf-component-button';
     
    export default () => (
      <StyleProvider>
        <Button type="primary" onClick={() => console.log('Hai!')}>
          Welcome!
        </Button>
      </StyleProvider>
    );

    Tips

    getInitialProps accepts arbitrary callback, so you can still hook into getInitialProps lifecycle.

    import Document, { Head, Main, NextScript } from 'next/document';
    import { getInitialProps, getStyles } from 'cf-style-nextjs';
     
    const MyInitialThing = ({ req }) => {
      const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
      return { userAgent };
    };
     
    export default class MyDocument extends Document {
      static getInitialProps = getInitialProps(MyInitialThing);
      render() {
        return (
          <html>
            <Head>{getStyles(this.props)}</Head>
            <body>
              User Agent: {this.props.userAgent}
              <Main />
              <NextScript />
            </body>
          </html>
        );
      }
    }

    Keywords

    none

    Install

    npm i cf-style-nextjs

    DownloadsWeekly Downloads

    1

    Version

    1.1.24

    License

    BSD-3-Clause

    Unpacked Size

    11.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar