{"id":13452145,"url":"https://github.com/sealninja/react-grid-system","last_synced_at":"2026-01-12T01:51:13.544Z","repository":{"id":9624449,"uuid":"62805909","full_name":"sealninja/react-grid-system","owner":"sealninja","description":" A powerful Bootstrap-like responsive grid system for React.","archived":false,"fork":false,"pushed_at":"2025-12-13T00:21:14.000Z","size":12675,"stargazers_count":828,"open_issues_count":43,"forks_count":88,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-12-17T13:37:42.730Z","etag":null,"topics":["css","css-bootstrap","grid","javascript","react","responsive-grid"],"latest_commit_sha":null,"homepage":"https://sealninja.github.io/react-grid-system/","language":"JavaScript","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/sealninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-07-07T12:42:18.000Z","updated_at":"2025-11-04T22:51:23.000Z","dependencies_parsed_at":"2025-12-14T02:11:15.918Z","dependency_job_id":null,"html_url":"https://github.com/sealninja/react-grid-system","commit_stats":{"total_commits":890,"total_committers":47,"mean_commits":18.93617021276596,"dds":0.604494382022472,"last_synced_commit":"6d85276485fb8626b23c38a3dfbb070b36a3cf91"},"previous_names":["jsxmachina/react-grid-system"],"tags_count":134,"template":false,"template_full_name":null,"purl":"pkg:github/sealninja/react-grid-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-grid-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-grid-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-grid-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-grid-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sealninja","download_url":"https://codeload.github.com/sealninja/react-grid-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sealninja%2Freact-grid-system/sbom","scorecard":{"id":69293,"data":{"date":"2025-08-04","repo":{"name":"github.com/sealninja/react-grid-system","commit":"36dd8e22decb1c42716f26e40147596060148452"},"scorecard":{"version":"v5.2.1-28-gc1d103a9","commit":"c1d103a9bb9f635ec7260bf9aa0699466fa4be0e"},"score":3.8,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/node.js.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/sealninja/react-grid-system/node.js.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/sealninja/react-grid-system/node.js.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"13 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T03:27:04.343Z","repository_id":9624449,"created_at":"2025-08-15T03:27:04.343Z","updated_at":"2025-08-15T03:27:04.343Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28331253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"ssl_error","status_checked_at":"2026-01-12T00:36:15.229Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","css-bootstrap","grid","javascript","react","responsive-grid"],"created_at":"2024-07-31T07:01:14.581Z","updated_at":"2026-01-12T01:51:13.527Z","avatar_url":"https://github.com/sealninja.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Grid System\nA powerful Bootstrap-like responsive grid system for React.\n\n[![NPM version](https://img.shields.io/npm/v/react-grid-system.svg?style=flat-square)](https://npmjs.org/package/react-grid-system)\n[![Downloads](https://img.shields.io/npm/dm/react-grid-system.svg?style=flat-square)](https://npmjs.org/package/react-grid-system)\n\n## Migration guide\n\n### Upgrading to v8\n\n`react-grid-system` v8 removes the `nowrap` property of `Row` in favor of a new `wrap` property. If you were using `\u003cRow nowrap\u003e`, replace it with `\u003cRow wrap=\"nowrap\" /\u003e`.\n\n### Upgrading to v7\n\n`react-grid-system` v7 adds a new screen class `xxl` for very large screens. This might have consequences for your app. To opt out of this new screen class, use this:\n\n```javascript\nimport { setConfiguration } from 'react-grid-system';\n\nsetConfiguration({ maxScreenClass: 'xl' });\n```\n\n## Installation\n\n```\nnpm install react-grid-system --save\n```\n## Getting started\n\n### Responsive grid\n\n`react-grid-system` provides a responsive grid for React inspired by [Bootstrap](https://getbootstrap.com/docs/4.5/layout/grid/). Moreover, it has various additional powerful features, such as setting breakpoints and gutter widths through React's context.\n\nThree components are provided for creating responsive grids: `Container`, `Row`, and `Col`.\n\nAn example on how to use these:\n\n```javascript\nimport { Container, Row, Col } from 'react-grid-system';\n\n\u003cContainer\u003e\n  \u003cRow\u003e\n    \u003cCol sm={4}\u003e\n      One of three columns\n    \u003c/Col\u003e\n    \u003cCol sm={4}\u003e\n      One of three columns\n    \u003c/Col\u003e\n    \u003cCol sm={4}\u003e\n      One of three columns\n    \u003c/Col\u003e\n  \u003c/Row\u003e\n\u003c/Container\u003e\n```\n\nFor all features of these components, please have a look at the API documentation: https://sealninja.github.io/react-grid-system/\n\n### Responsive utilities\n\nNext to the grid, two components are provided for showing or hiding content: `Visible` and `Hidden`.\nThe main difference between these two components and the similar CSS classes provided by Bootstrap is that these two components do not render the content at all when it should be hidden, instead of just hiding it with CSS.\n\nSome examples on how to use these components:\n\n```javascript\nimport { Visible } from 'react-grid-system';\n\n\u003cp\u003e\n  \u003cspan\u003eYour current screen class is \u003c/span\u003e\n  \u003cVisible xs\u003e\u003cstrong\u003exs\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cVisible sm\u003e\u003cstrong\u003esm\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cVisible md\u003e\u003cstrong\u003emd\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cVisible lg\u003e\u003cstrong\u003elg\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cVisible xl\u003e\u003cstrong\u003exl\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cVisible xxl\u003e\u003cstrong\u003exxl\u003c/strong\u003e\u003c/Visible\u003e\n  \u003cspan\u003e.\u003c/span\u003e\n\u003c/p\u003e\n```\n\n```javascript\nimport { Visible, Hidden } from 'react-grid-system';\n\n\u003cVisible xs sm\u003e\n  \u003cp\u003eParagraph visible on extra small and small.\u003c/p\u003e\n\u003c/Visible\u003e\n\u003cHidden xs sm\u003e\n  \u003cp\u003eParagraph hidden on extra small and small.\u003c/p\u003e\n\u003c/Hidden\u003e\n\u003cVisible md lg\u003e\n  \u003cp\u003eParagraph visible on medium and large.\u003c/p\u003e\n\u003c/Visible\u003e\n\u003cHidden md lg\u003e\n  \u003cp\u003eParagraph hidden on medium and large.\u003c/p\u003e\n\u003c/Hidden\u003e\n```\n\nNext to that, the `ScreenClassRender` component is provided, for rendering a component differently based on the screen class. An example on how to use this:\n\n```javascript\nimport { ScreenClassRender } from 'react-grid-system';\n\n\u003cScreenClassRender render={screenClass =\u003e (\n  \u003cp style={{ fontSize: ['lg', 'xl', 'xxl'].includes(screenClass) ? '2rem' : '1rem' }} \u003e\n    Screen class: {screenClass}\n  \u003c/p\u003e\n)} /\u003e\n```\n\nAlternatively, the `useScreenClass` hook can be used for rendering a component differently based on the screen class. Some examples on how to use this:\n\n```javascript\nimport React from 'react';\nimport { useScreenClass } from 'react-grid-system';\n\n// responsive component based the screen width\nfunction Example1() {\n  const screenClass = useScreenClass();\n  return (\n    \u003cp style={{ fontSize: ['lg', 'xl', 'xxl'].includes(screenClass) ? '2rem' : '1rem' }} \u003e\n      Screen class: {screenClass}\n    \u003c/p\u003e\n  );\n}\n\n// responsive component based the div width\nfunction Example2() {\n  const elementRef = useRef(null);\n  const screenClass = useScreenClass(elementRef);\n  return (\n    \u003cdiv ref={elementRef}\u003e\n      \u003cp style={{ fontSize: ['lg', 'xl', 'xxl'].includes(screenClass) ? '2rem' : '1rem' }} \u003e\n        Screen class: {screenClass}\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Configuration\n\nThe following settings can be configured, to alter the responsive behavior of the grid components:\n\n| Setting              | Default Value                       | Description                                                                                           |\n| -------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------- |\n| `breakpoints`        | `[576, 768, 992, 1200, 1600, 1920]` | The breakpoints (minimum width) of devices in screen class `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`. |\n| `containerWidths`    | `[540, 740, 960, 1140, 1540, 1810]` | The container widths in pixels of devices in screen class `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`.  |\n| `gutterWidth`        | `30`                                | The gutter width in pixels. A gutter width of 30 means 15px on each side of a column.                 |\n| `gridColumns`        | `12`                                | The number of columns in the grid .                                                                   |\n| `defaultScreenClass` | `xxl`                               | The screen class used when the view port cannot be determined using `window`.                         |\n| `maxScreenClass`     | `xxl`                               | The maximum screen class to be used.                                                                  |\n\nThese settings can be configured in the following way:\n\n```javascript\nimport { setConfiguration } from 'react-grid-system';\n\nsetConfiguration({ defaultScreenClass: 'sm', gridColumns: 20 });\n```\n\n An example on how to use them can be found in the [Example application with SSR](#example-application-with-ssr) below.\n\n## ScreenClass Context API\n\nInternally, every component that requires the current `screenClass` (which is a human-readable string version of the `window.innerWidth` relating to the user's breakpoints) subscribes to a `ScreenClassProvider`. The provider utilizes the [React Context API](https://reactjs.org/docs/context.html) to send down the current `screenClass` as it updates. By default, each instance of every component subscribes to a separate provider, creating `resize` listeners for each. This can cut down renders during a resize event from ~300 to 4 (one for each breakpoint) making the grid much more performant.\n\n### Do I need to change anything in my code?\n\nThis new API is entirely opt-in and current implementations will continue to work. However, for a signficiant performance increase, you will need to add the `ScreenClassProvider` to your application, typically at the highest level in the React node tree (i.e, App.js).\n\n\n### How do I use the ScreenClassProvider?\n\n```jsx static\nimport React from 'react';\nimport { ScreenClassProvider } from 'react-grid-system';\n\nexport default function App() {\n  return (\n    \u003cScreenClassProvider\u003e\n      \u003cHeader /\u003e\n      \u003cPage /\u003e\n      \u003cFooter /\u003e\n    \u003c/ScreenClassProvider\u003e\n  );\n}\n```\n\nInternally, the `ScreenClassProvider` attaches a `resize` listener and then updates `state.screenClass` exclusively when a new breakpoint is hit. The `state.screenClass` value is then attached to `ScreenClassContext.Provider`. ScreenClass-dependent components are wrapped with `ScreenClassResolver` which checks to see if there is a valid provider above it and provides one if there is not.\n\nThe performance benefit comes from _you_ adding a `ScreenClassProvider` to your application which allows `react-grid-system` components to subscribe to **one source of truth** for the ScreenClass.\n\n\n## API documentation\n\nExtensive documentation of all components can be found at the GitHub pages: https://sealninja.github.io/react-grid-system/\n\n## Example application with SSR\n\nAn example application with server-side rendering using features of `react-grid-system` can be found at https://github.com/sealninja/react-ssr-example.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsealninja%2Freact-grid-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsealninja%2Freact-grid-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsealninja%2Freact-grid-system/lists"}