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
Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
@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.
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
pnpm run @sciopro/components // 📦 components
pnpm run @sciopro/hooks // 🚀 hooks
pnpm run @sciopro/utils // 🔧 utils
import React from 'react';
import { Button } from '@sciopro/components';
export default () => {
return <Button>Button</Button>;
};
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>
);
};
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>
);
};