{"id":20447612,"url":"https://github.com/acrool/acrool-react-grid","last_synced_at":"2025-08-03T03:14:59.412Z","repository":{"id":39376276,"uuid":"423293980","full_name":"acrool/acrool-react-grid","owner":"acrool","description":"CSS IN JS following Bootstrap RWD design, composed of React + Styled Component","archived":false,"fork":false,"pushed_at":"2025-07-27T02:39:24.000Z","size":4257,"stargazers_count":12,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-27T05:20:58.270Z","etag":null,"topics":["acrool","bootstrap","flexbox","grid-system","react","react-bootstrap","react-grid","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://acrool-react-grid.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acrool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-01T00:38:52.000Z","updated_at":"2025-07-27T02:39:27.000Z","dependencies_parsed_at":"2023-09-25T03:59:44.047Z","dependency_job_id":"763d5161-a098-45c4-a65e-4b96f5cbefb0","html_url":"https://github.com/acrool/acrool-react-grid","commit_stats":{"total_commits":361,"total_committers":1,"mean_commits":361.0,"dds":0.0,"last_synced_commit":"ebb5a553078caaa1567efe0eeaf20cf059613ed2"},"previous_names":["acrool/acrool-react-grid","imagine10255/bear-react-grid"],"tags_count":179,"template":false,"template_full_name":null,"purl":"pkg:github/acrool/acrool-react-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acrool","download_url":"https://codeload.github.com/acrool/acrool-react-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268488944,"owners_count":24258357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acrool","bootstrap","flexbox","grid-system","react","react-bootstrap","react-grid","styled-components","typescript"],"created_at":"2024-11-15T10:28:04.750Z","updated_at":"2025-08-03T03:14:59.404Z","avatar_url":"https://github.com/acrool.png","language":"TypeScript","funding_links":[],"categories":["React underlying structure"],"sub_categories":[],"readme":"# Acrool React Grid\n\n\u003ca href=\"https://acrool-react-grid.pages.dev/\" title=\"Acrool React Grid - CSS IN JS following Bootstrap RWD design, composed of React + Styled Component\"\u003e\n    \u003cimg src=\"https://acrool-react-grid.pages.dev/img/og.webp\" alt=\"Acrool React Grid Logo\" /\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n    CSS IN JS following Bootstrap RWD design, composed of React + Styled Component\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@acrool/react-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-grid)\n[![npm](https://img.shields.io/bundlejs/size/@acrool/react-grid?style=for-the-badge)](https://github.com/acrool/@acrool/react-grid/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/l/@acrool/react-grid?style=for-the-badge)](https://github.com/acrool/react-grid/blob/main/LICENSE)\n\n[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-grid)\n[![npm](https://img.shields.io/npm/dt/@acrool/react-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-grid)\n\n\n\u003c/div\u003e\n\n\n| Version | Styled-component | React       |\n|---------|------------------|-------------|\n| 6.x     | 6.x              | ^18.3       |\n | 5.x     | 5.x              | 18.0 ~ 18.3 | \n\n\n## Documentation\n\n- [Getting Started](https://acrool-react-grid.pages.dev/docs/getting-started)\n- [Faq](https://acrool-react-grid.pages.dev/docs/category/faqs)\n- [Config](https://acrool-react-grid.pages.dev/docs/config)\n- [Utilities](https://acrool-react-grid.pages.dev/docs/utilities)\n- [Breakpoints](https://acrool-react-grid.pages.dev/docs/breakpoints)\n- [Container](https://acrool-react-grid.pages.dev/docs/container)\n- [Grid System](https://acrool-react-grid.pages.dev/docs/category/grid-system)\n- [CSS Grid](https://acrool-react-grid.pages.dev/docs/category/css-grid)\n- [Storybook](https://acrool-react-grid-storybook.pages.dev)\n\n## Features\n\n- Use `React` + `Styled-component` and `styled-component themeProvider`\n- Easier to use\n- Refer to the design of `Bootstrap 5` and change it to `CSS IN JS` method\n- Provides tool CSS for `Bootstrap 5` layout\n- Provide `RWD` Media query method\n- Support `NextJS 14` (v5.0.3+)\n- Container max width `--container-max-width-?` Change from the middle level\n\n## Installation\n\n```bash\nyarn add styled-components @acrool/react-grid\n```\n\nin your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)\n\n```json\n{\n    \"resolutions\": {\n        \"styled-components\": \"6.1.17\"\n    }\n}\n```\n\n\nin your App.js add  \n`see the example/src/App.js`\n\n```tsx\nimport {GridThemeProvider, IGridSetting} from '@acrool/react-grid';\nimport '@acrool/react-grid/dist/index.css';\n\n\nconst gridTheme: IGridSetting = {\n    spacer: '1rem',\n    // spacer: {\n    //   xs: '1rem',\n    //   lg: '40px',  \n    // },\n    containerMargin: '40px',\n    // containerMargin: {\n    //     xs: '40px',\n    //     lg: '80px',\n    // },\n    gridColumns: 12,\n    gridBreakpoints: {\n        xs: 0,\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        xxl: 1540,\n    },\n    containerMaxWidths: {\n        sm: 540,\n        md: 720,\n        lg: 960,\n        xl: 1140,\n        xxl: 1141,\n    },\n}\n\n\n\u003cGridThemeProvider gridTheme={gridTheme}\u003e\n    \u003cApp/\u003e\n\u003c/GridThemeProvider\u003e\n```\n\n***Override css setting***\n\ncreate folder and file: `src/library/acrool-react-grid/grid.scss`\n\n```scss\n@use \"@acrool/react-grid/dist/styles.scss\" with (\n\n    // 定义断点\n    $breakpoints: (\n        sm: 576px,\n        md: 768px,\n        lg: 992px,\n        xl: 1200px,\n        xxl: 1440px\n    ),\n\n    // 网格系统变量\n    $grid-gutters: (\n        1: 2px,\n        2: 4px,\n        3: 6px,\n        4: 8px,\n        5: 10px,\n        6: 12px,\n        7: 14px,\n        8: 16px,\n        9: 18px,\n        10: 20px,\n        11: 22px,\n        12: 24px,\n        13: 26px,\n        14: 28px,\n        15: 30px,\n        16: 32px,\n        17: 34px,\n        18: 36px,\n        19: 38px,\n        20: 40px,\n        21: 42px,\n        22: 44px,\n        23: 46px,\n        24: 48px,\n        25: 50px,\n        26: 52px,\n        27: 54px,\n        28: 56px,\n        29: 58px,\n        30: 60px,\n        31: 62px,\n        32: 64px,\n        33: 66px,\n        34: 68px,\n        35: 70px,\n        36: 72px,\n        37: 74px,\n        38: 76px,\n        39: 78px,\n        40: 80px,\n        41: 82px,\n        42: 84px,\n        43: 86px,\n        44: 88px,\n        45: 90px,\n        46: 92px,\n        47: 94px,\n        48: 96px,\n        49: 98px,\n        50: 100px,\n        51: 102px,\n        52: 104px,\n        53: 106px,\n        54: 108px,\n        55: 110px,\n        56: 112px,\n        57: 114px,\n        58: 116px,\n        59: 118px,\n        60: 120px,\n        61: 122px,\n        62: 124px,\n        63: 126px,\n        64: 128px,\n        65: 130px,\n        66: 132px,\n        67: 134px,\n        68: 136px,\n        69: 138px,\n        70: 140px,\n        71: 142px,\n        72: 144px,\n        73: 146px,\n        74: 148px,\n        75: 150px,\n        76: 152px,\n        77: 154px,\n        78: 156px,\n        79: 158px,\n        80: 160px,\n        81: 162px,\n        82: 164px,\n        83: 166px,\n        84: 168px,\n        85: 170px,\n        86: 172px,\n        87: 174px,\n        88: 176px,\n        89: 178px,\n        90: 180px,\n        91: 182px,\n        92: 184px,\n        93: 186px,\n        94: 188px,\n        95: 190px,\n        96: 192px,\n        97: 194px,\n        98: 196px,\n        99: 198px,\n        100: 200px\n    )\n);\n\n```\n\n\n## Examples\n\nuse in your page/component:\n```tsx\nimport {Container, Row, Col, Grid, Flex, media} from '@acrool/react-grid';\n\nconst MyPage = () =\u003e {\n    return (\n        \u003cContainer\u003e\n            \u003cMyTitle\u003eacrool-react-grid\u003c/MyTitle\u003e\n            \u003cDesc isVisible={false}\u003emyDesc\u003c/Desc\u003e\n            \n            \u003cRow\u003e\n                \u003cCol col\u003ecol2 (50%) \u003c/Col\u003e\n                \u003cCol col\u003ecol2 (50%) \u003c/Col\u003e\n            \u003c/Row\u003e\n            \u003cGrid columns={2}\u003e\n                \u003cdiv\u003eGrid Col2\u003c/div\u003e\n                \n                \u003cFlex className=\"flex-column gap-2\"\u003e\n                    \u003cdiv\u003eGrid Col3\u003c/div\u003e\n                    \u003cdiv\u003eGrid Col3\u003c/div\u003e\n                \u003c/Flex\u003e\n                \n                \n            \u003c/Grid\u003e\n            \u003cGrid columns=\"repeat(1, 3fr)\"\u003e\n                \u003cGridCol\u003eGrid Col3\u003c/GridCol\u003e\n                \u003cGridCol colSpan={2}\u003eGrid Col3\u003c/GridCol\u003e\n            \u003c/Grid\u003e\n        \u003c/Container\u003e\n    );\n}\n\n// use rwd\nconst MyTitle = styled.div`\n    font-size: 12px;\n    ${media.md`\n        font-size: 14px;\n    `}\n`\n\n// use rwd props\nconst Desc = styled.div\u003c{\n    isVisible: boolean\n}\u003e`\n    ${props =\u003e media.md`\n        display: ${props.isVisible ? 'block': 'flex'}\n    `}\n    \n    // or\n    ${props =\u003e css`\n        font-size: 12px;\n        ${media.md`\n            display: ${props.isVisible ? 'block': 'flex'}\n        `}\n    `}\n`\n\n```\n\n## MediaConsumer\n\n```tsx\n\u003cMediaConsumer sizes={['xxl']}\u003e\n    {(mediaSize)=\u003e {\n\n        if(mediaSize === 'xxl'){\n            return \u003cMarquee\n                autoFill\n                play={hoverId === null}\n                className=\"py-8\"\n            \u003e\n                {renderCards(true)}\n            \u003c/Marquee\u003e;\n        }\n\n\n        return \u003cContainer fluid\u003e\n            \u003cFlex column className=\"gap-8\"\u003e\n                {renderCards(false)}\n            \u003c/Flex\u003e\n        \u003c/Container\u003e;\n    }}\n\u003c/MediaConsumer\u003e\n```\n\n\nThere is also a codesandbox template that you can fork and play with it:\n\n[Acrool React Grid Template](https://github.com/acrool/acrool-react-grid-template)\n\nUse Nextjs example\n\n\n[Acrool React Grid Nextjs Template](https://github.com/acrool/acrool-react-grid-nextjs)\n\n\n\nThere is also a storybook that you can play with it:\n\n[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-grid/main/play-in-example-button.svg)](https://acrool-react-grid-storybook.pages.dev)\n\n\n## Common Props\n\n```tsx\nexport interface FCProps {\n    id?: string\n    style?: CSS.Properties\n    className?: string\n}\n\nexport interface FCChildrenProps extends FCProps {\n    children?: ReactNode\n}\n\nexport interface IFormFieldProps\u003cG extends HTMLElement, T = string\u003e {\n    ref?: RefObject\u003cG\u003e | RefCallback\u003cG\u003e\n    name?: string\n    value?: T\n    onChange?: ChangeEventHandler\u003cG\u003e\n    placeholder?: string\n}\n\nexport type TSetState\u003cT\u003e = (newValue: T) =\u003e void | Dispatch\u003cSetStateAction\u003cT\u003e\u003e\n```\n\n## Experiments\n\nhttps://github.com/acrool/acrool-frontend-experiments\n\n## License\n\nMIT © [Acrool](https://github.com/acrool) \u0026 [Imagine](https://github.com/imagine10255)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facrool%2Facrool-react-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-grid/lists"}