Skip to content

censorbot-components is a component library built on top of the Chakra UI theming library.

Notifications You must be signed in to change notification settings

JPBBots/censorbot-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 28, 2022
fd8f2b8 · Jan 28, 2022
Aug 8, 2021
Aug 7, 2021
Jul 24, 2021
Jan 28, 2022
Jul 24, 2021
Aug 7, 2021
Aug 7, 2021
Dec 28, 2021
Aug 7, 2021
Jul 25, 2021
Jul 24, 2021
Jul 5, 2021
Jan 28, 2022
Jul 24, 2021
Aug 8, 2021
Jul 5, 2021
Jul 24, 2021
Aug 7, 2021
Jan 28, 2022
Aug 7, 2021
Aug 7, 2021
Aug 7, 2021
Jan 28, 2022

Repository files navigation


jpbbots.org


Discord server Test Netlify Status

About

censorbot-components is a component library built on top of the Chakra UI theming library.

Prerequisite

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

Installation

npm install @jpbbots/censorbot-components

Or with yarn

yarn add @jpbbots/censorbot-components

Theme types

You 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"
  }
  ...
}

Dependencies

Peer Dependencies

Example usage

General React

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

Next.js

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

Links

Help

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.