@dev-sam/996-icu-banner NPM

996-icu-banner

A React banner component that shows your support for 996.icu. Demo

Background

996.icu is currently the second most starred project on GitHub. Some Chinese browsers blocked the repo page. Let's add the banner to our personal website and also get ourselves blocked!

(Inspired by Lets-get-arrested project).

Usage

You can install it by:

yarn: yarn add @dev-sam/996-icu-banner
npm: npm i @dev-sam/996-icu-banner

import Banner from '@dev-sam/996-icu-banner'

// anywhere inside your react app
// let's use App as an example

export default function App() {
  return (
    <div>
      ... Banner does not need to be the first element
      <Banner />
      ... some other stuff
    </div>
  );
}

The component supports some customization. Here are a list of all the props it accepts:

type Languages = 'en_US' | 'zh-Hans';
type Props = {
  readonly bannerPosition: 'top' | 'bottom';
  readonly lang: Languages;
  readonly className: string | undefined;
  readonly styles: CSSProperties | undefined;
}

You can also check that directly in index.tsx.

Each DOM element has a unique ID. You can directly style them using CSS or passing in className or styles props to style the top-level banner.

In order to ensure that the position: fixed banner is visible, it's recommend to style it with z-index: 996996;