Bear React Grid

CSS IN JS following Bootstrap RWD design, composed of React + Styled Component

Documentation

• Getting Started
• Faq
• Config
• Utilities
• Breakpoints
• Container
• Grid System
• CSS Grid

Features

• Use React + Styled-component and styled-component themeProvider
• Easier to use
• Refer to the design of Bootstrap 5 and change it to CSS IN JS method
• Provides tool CSS for Bootstrap 5 layout
• Provide RWD Media query method
• Support NextJS 13 (v5.0.3+)

Installation

1yarn add bear-react-grid

in your packages. (Make the version of styled-component you use match the version of styled-component used in bear-react-gird)

1"resolutions": {
2   "styled-components": "5.3.9"
3}

in your App.js add
see the example/src/App.js

1import {GridThemeProvider, IGridSetting} from 'bear-react-grid';
2import 'bear-react-grid/dist/index.css';
3
4
5const gridTheme: IGridSetting = {
6    spacer: '1rem',
7    gutter: '.625rem',
8    gridColumns: 24,
9    gridBreakpoints: {
10        xs: 0,
11        sm: 576,
12        md: 768,
13        lg: 992,
14        xl: 1200,
15        xxl: 1540,
16    },
17    containerMaxWidths: {
18        sm: 540,
19        md: 720,
20        lg: 960,
21        xl: 1140,
22        xxl: 1141,
23    },
24}
25
26
27<GridThemeProvider gridTheme={gridTheme}>
28    <App/>
29</GridThemeProvider>

Examples

use in your page/component:

1import {Container, Row, Col, Grid, Flex, media} from 'bear-react-grid';
2
3const MyPage = () => {
4    return (
5        <Container>
6            <MyTitle>bear-react-grid</MyTitle>
7            <Row>
8                <Col col>col2 (50%) </Col>
9                <Col col>col2 (50%) </Col>
10            </Row>
11            <Grid columns={2}>
12                <div>Grid Col2</div>
13                
14                <Flex className="flex-column gap-2">
15                    <div>Grid Col3</div>
16                    <div>Grid Col3</div>
17                </Flex>
18                
19                
20            </Grid>
21            <Grid columns="repeat(1, 3fr)">
22                <GridCol>Grid Col3</GridCol>
23                <GridCol colSpan={2}>Grid Col3</GridCol>
24            </Grid>
25        </Container>
26    );
27}
28
29// use rwd
30const MyTitle = styled.div`
31    font-size: 12px;
32    ${media.md`
33        font-size: 14px;
34    `}
35`
36

There is also a codesandbox template that you can fork and play with it:

Use Nextjs example

License

MIT © imagine10255