censorbot-components is a component library built on top of the Chakra UI theming library.
In order to use our GitHub package and versions, you need to add this line to your .npmrc (or create one)
@jpbbots:registry=https://npm.pkg.github.com
npm install @jpbbots/censorbot-componentsOr with yarn
yarn add @jpbbots/censorbot-componentsYou will need to manually add a script to generate types for now until another solution is available.
{
...
"scripts": {
"postinstall": "npx @chakra-ui/cli tokens ./node_modules/@jpbbots/censorbot-components/src/theme/index.ts"
}
...
}- @chakra-ui/react ^1.6.4 - Our choice of component theming
- @emotion/react ^11.4.0 - Chakra UI Peer Dependency
- @emotion/styled ^11.3.0 - Chakra UI Peer Dependency
- chroma-js ^2.1.2 - To ease the pain of color definitions for the theme
- framer-motion ^4.1.17 - Beautifully simple animations / Chakra UI Peer Dependency
- react-icons ^4.2.0 - For our use of Font Awesome icons and easy implementation with Chakra UI's Icon component
Wrap your React app with the CCProvider component:
import { CCProvider } from '@jpbbots/censorbot-components'
export const AppWrapper = ({ children }) => (
<CCProvider>
{children}
</CCProvider>
)Any ChakraUI components placed within the provider will be themed
_app.js
import { CCProvider } from '@jpbbots/censorbot-components'
function MyApp({ Component, pageProps }) {
return (
<CCProvider cookies={pageProps.cookies}>
<Component {...pageProps} />
</CCProvider>
)
}
export function getServerSideProps({ req }) {
return {
props: {
cookies: req.headers.cookie ?? "",
},
}
}
export default MyApp_document.js
import { NextColorModeScript, NextFontHead } from '@jpbbots/censorbot-components'
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head>
<NextFontHead/>
</Head>
<body>
<NextColorModeScript/>
<Main />
<NextScript />
</body>
</Html>
)
}
}If you're having problems or don't understand how to implement the library for your own purposes, join our Support Discord Server for help.