scioPro

A lightweight React toolchain built through Monorepo multi-package repository, including react component library, hooks library and tool function library

English | 简体中文

加入开发

# Pull repository code
git clone https://github.com/abinzhao/scioPro.git

# Enter the branch and install the dependencies
cd ./scioPro
yarn install

# Create new branch from master branch and enter, start developing

git checkout -b sciopro/[Semantic name]
# such as：git checkout -b sciopro/dev-button

🖥 Browser Compatibility

Modern browsers and Internet Explorer 11 (with polyfills)
Electron


Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

On-demand loading/TypeScript

@sciopro/components，@sciopro/hooks,@sciopro/utils The JS code supports tree shaking based on ES modules by default, and is written in TypeScript and provides a complete definition file.

Install

yarn add @sciopro/components or(npm run @sciopro/components) // 📦 components
yarn add @sciopro/hooks or(npm run @sciopro/hooks) // 🚀 hooks
yarn add @sciopro/utils or(npm run @sciopro/utils) // 🔧 utils

It is recommended to use `pnpm` to install

pnpm run @sciopro/components  // 📦 components
pnpm run @sciopro/hooks  // 🚀 hooks
pnpm run @sciopro/utils  // 🔧 utils

Component usage example

import React from 'react';
import { Button } from '@sciopro/components';

export default () => {
  return <Button>Button</Button>;
};

Hooks usage example

import React from 'react';
import { ViewportProvider, useViewport } from '@sciopro/hooks';
const MyComponent = () => {
  const { width, height } = useViewport();
  const breakpoint = 620;
  return width < breakpoint ? (
    <div>
      Hello, small screen, the current screen width and height is：width:{width},height:{height}
    </div>
  ) : (
    <div>
      Hello, big screen, the current screen width and height is：width:{width},height:{height}
    </div>
  );
};
export default () => {
  return (
    <ViewportProvider>
      <MyComponent />
    </ViewportProvider>
  );
};

Utils usage example

import React from 'react';
import { Add } from '@sciopro/utils';

export default () => {
  const [num, setNum] = React.useState(0);
  React.useEffect(() => {
    Add(num);
  }, [num]);
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>x2</button>
      <h2>{num}</h2>
    </div>
  );
};

abinzhao/scioPro