❤
npm
Sign UpSign In

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>
    );
  }
}

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i cf-style-nextjs

    Weekly Downloads

    2

    Version

    1.1.24

    License

    BSD-3-Clause

    Unpacked Size

    11.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • lerwincf
    • lbarthonet
    • cf-media-manager
    • jacobbednarz
    • celso
    • cf-radar
    • dash_service_account
    • g4brym
    • snigdha34
    • wrangler-publisher
    • marksteyn
    • chiminator
    • sgoodhew_cf
    • terinjokes
    • third774
    • jsteinberger
    • jasnell
    • asapzacy
    • pcostanzo
    • gregbrimble
    • geelen
    • rexscaria
    • dcruz_cf
    • xuranwang
    • jculvey
    • sejoker
    • vasturiano
    • cf-ci-write
    • segments-write
    • thibmeu
    • xortive
    • gurjinder
    • cf-ci2
    • lvalenta
    • worenga
    • miksu
    Try on RunKit
    Report malware