1.1.24 • Published 6 years ago
cf-style-nextjs v1.1.24
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>
);
}
}
1.1.24
6 years ago
1.1.23
6 years ago
1.1.22
6 years ago
1.1.21
6 years ago
1.1.20
6 years ago
1.1.19
6 years ago
1.1.18
6 years ago
1.1.17
6 years ago
1.1.16
6 years ago
1.1.15
6 years ago
1.1.14
6 years ago
1.1.13
6 years ago
1.1.12
6 years ago
1.1.11
6 years ago
1.1.10
6 years ago
1.1.9
6 years ago
1.1.8
6 years ago
1.1.7
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago