一些库和代码

emotion

import { css } from '@emotion/react/macro';
import styled from '@emotion/styled/macro';
 
export interface PageForwardedProps {
  padding?: number | number[];
}
 
export const Page = styled.section<PageForwardedProps>`
  ${({ padding = 24 }) =>
    css`
      padding: ${typeof padding === 'number'
        ? `${padding}px`
        : padding.map((s) => `${s}px`).join(' ')};
    `}
`;
 
 
export interface SectionForwardedProps {
  span?: number;
}
 
export const Section = styled.section<SectionForwardedProps>`
  &:not(:last-of-type) {
    margin-bottom: ${({ span = 24 }) => `${span}px`};
  }
`;
 
export interface HeaderForwardedProps {
  height?: number;
}
 
export const Header = styled.header<HeaderForwardedProps>`
  flex: 0 0 auto;
  ${({ height }) =>
    height !== undefined &&
    css`
      width: ${height}px;
    `}
`;
 
export interface SiderForwardedProps {
  width?: number;
}
 
export const Sider = styled.aside<SiderForwardedProps>`
  flex: 0 0 auto;
  ${({ width }) =>
    width !== undefined &&
    css`
      width: ${width}px;
    `}
`;
 
export const Content = styled.main`
  flex: 1 1 auto;
`;
 
export interface FooterForwardedProps {
  height?: number;
}
 
export const Footer = styled.footer<FooterForwardedProps>`
  flex: 0 0 auto;
  ${({ height }) =>
    height !== undefined &&
    css`
      width: ${height}px;
    `}
`;
 
export interface LayoutForwardedProps {
  root?: boolean;
  direction?: 'row' | 'column';
}
 
const Layout = styled.section<LayoutForwardedProps>`
  display: flex;
  flex-direction: ${({ direction = 'column' }) => direction};
  flex: 1 1 auto;
  overflow: hidden;
  ${({ root }) =>
    root &&
    css`
      width: 100vw;
      height: 100vh;
    `};
`;
 
export default Layout;

craco.config.js

const CracoLessPlugin = require('craco-less');
 
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@primary-color': '',
              '@success-color': '#',
              '@info-color': '#',
              '@warning-color': '#',
              '@error-color': '#',
              '@body-background': '#',
              '@heading-color': '#',
              '@text-color': '#',
              '@text-color-secondary': '#',
              '@layout-body-background': '#',
              '@alert-warning-bg-color': '#',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Sentry

import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
 
Sentry.init({
  dsn: '',
  release: '',
  environment: '',
  integrations: [new Integrations.BrowserTracing()],
  enabled: process.env.NODE_ENV === 'production',
  tracesSampleRate: 0,
});
 
const SentryApp = Sentry.withProfiler(App);
 
ReactDOM.render(<SentryApp />, document.getElementById('root'));

recoil

import { atom, useRecoilState } from 'recoil';
 
const globalUserAtomState = atom<UserInfo | null>({
  key: 'globalUserAtomState',
  default: null,
});
 
const useGlobalUser = () => {
  const [globalUser, setGlobalUser] = useRecoilState(globalUserAtomState);
  return {
    globalUser,
    setGlobalUser
  };
};
 
export default useGlobalUser;

import { selector, useRecoilValue } from 'recoil';

export const infoState = selector<boolean | null>({
  key: 'infoState',
  get: async ({ get }) => {
    const data = await fetchApi().catch(() => {
      return data?.data;
    });
  },
});
 
const useInfo = () => {
  return useRecoilValue(infoState);
};
 
export default useInfo;

unstable_batchedUpdates

import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 
batchedUpdates(() => {
  setStateA(1);
  setStateB(1);
  setStateC(1);
  ...
})

downloadImage

import { nanoid } from 'nanoid';

const downloadImage = (src: string) => {
  const image = new Image();

  image.setAttribute('crossOrigin', 'anonymous');

  image.onload = () => {
    const doc = document;
    const canvas = doc.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);
    const url = canvas.toDataURL('image/png');
 
    const link = doc.createElement('a');
    const event = new MouseEvent('click');
    link.download = nanoid(12).replaceAll('-', '_');
    link.href = url;
    link.dispatchEvent(event);
    link.remove();
  };
 
  image.src = src;
};
 
export default downloadImage;

xlsx

import * as XLSX from 'xlsx';
import moment from 'moment';

export interface ExportExcelParams {
  exportData: any[];
  fileName: string;
}

const ExportExcel = (params: ExportExcelParams) => {
  const { fileName, exportData } = params;

  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportData);

  const workbook: XLSX.WorkBook = XLSX.utils.book_new();

  const tail = moment().format('YYYY_MM_DD_HH_mm_ss');

  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  XLSX.writeFile(workbook, `${fileName}_${tail}.xlsx`);
};

export default ExportExcel;