{"id":28236945,"url":"https://github.com/bytebodger/material-ui","last_synced_at":"2025-06-10T15:30:55.990Z","repository":{"id":57167230,"uuid":"353507471","full_name":"bytebodger/material-ui","owner":"bytebodger","description":"A few simple (borderline-silly, they're so simple) wrapper components for Material UI components","archived":false,"fork":false,"pushed_at":"2022-02-06T00:13:22.000Z","size":938,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T16:13:44.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bytebodger.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}},"created_at":"2021-03-31T22:33:26.000Z","updated_at":"2022-01-14T03:35:11.000Z","dependencies_parsed_at":"2022-08-30T15:10:19.024Z","dependency_job_id":null,"html_url":"https://github.com/bytebodger/material-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fmaterial-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fmaterial-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fmaterial-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fmaterial-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytebodger","download_url":"https://codeload.github.com/bytebodger/material-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fmaterial-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259101127,"owners_count":22805208,"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","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":[],"created_at":"2025-05-19T00:17:06.797Z","updated_at":"2025-06-10T15:30:55.976Z","avatar_url":"https://github.com/bytebodger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# material-ui\n\n`material-ui` is just a few simple (borderline-silly, they're so _simple_) wrapper components for Material UI. Specifically, the package provides `\u003cRow\u003e` and `\u003cColumn\u003e`, which are meant to provide a more intuitive interface to Material UI's `\u003cGrid\u003e` component.\n\nMost paradigms for responsive design work off a concept of having _rows_, with each of those rows containing _columns_. But for some reason, the folks who designed Material UI decided that rows and columns should both be controlled by a single component - `\u003cGrid\u003e`. This can lead to React code that looks like this:\n\n```jsx\nexport const SomeComponent = () =\u003e {\n   return \u003c\u003e\n      \u003cGrid container={true}\u003e\n         \u003cGrid item={true} xs={12}\u003e\n            \u003cGrid container={true}\u003e\n               \u003cGrid item={true} xs={6}\u003e\n                  Some content\n               \u003c/Grid\u003e\n               \u003cGrid item={true} xs={6}\u003e\n                  Some more content\n               \u003c/Grid\u003e\n            \u003c/Grid\u003e\n         \u003c/Grid\u003e\n      \u003c/Grid\u003e\u003e\n   \u003c/\u003e\n}\n```\n\nIn the example above, there is one _row_, that contains a _column_, that spans the entire _row_. Inside that _column_, there's another _row_. The inner _row_ contains two _columns_, each spanning half the length of the _row_. Despite this, the code contains no references to \"rows\" or \"columns\".  _Every_ component is a \"Grid\". The _rows_ are grids - with the `container` attribute set to `true`. The _columns_ are grids - with the `item` attribute set to `true`.\n\nThis is very counterintuitive for anyone who's accustomed to dealing with \"traditional\" responsive design systems. It's difficult to mentally parse the successive layers of nested `\u003cGrid\u003e`s. It's also difficult to quickly peruse the code and determine which `\u003cGrid\u003e`s represent _rows_, and which ones represent _columns_. It just looks like a big pile of `\u003cGrid\u003e` components (which... it _is_).\n\nThis package provides two simple wrapper components that will transform the above code as such:\n\n```jsx\nexport const SomeComponent = () =\u003e {\n   return \u003c\u003e\n      \u003cRow\u003e\n         \u003cColumn xs={12}\u003e\n            \u003cRow\u003e\n               \u003cColumn xs={6}\u003e\n                  Some content\n               \u003c/Column\u003e\n               \u003cColumn xs={6}\u003e\n                  Some more content\n               \u003c/Column\u003e\n            \u003c/Row\u003e\n         \u003c/Column\u003e\n      \u003c/Row\u003e\n   \u003c/\u003e\n}\n```\n\n## Usage\n\nAfter installation, import the components:\n\n```jsx\nimport { Row } from '@toolz/material-ui/dist/Row';\nimport { Column } from '@toolz/material-ui/dist/Column';\n```\n\n## Components\n\n### `\u003cRow\u003e`\n\nA `\u003cRow\u003e` is a responsive container designed to hold `\u003cColumn\u003e` components.\n\n```javascript\nconst props = {\n   alignContent: {\n      optional,\n      format: oneOf[\n         'center',\n            'flex-end',\n            'flex-start',\n            'space-around',\n            'space-between',\n            'stretch',\n         ],\n      defaultValue: 'stretch',\n   },\n   alignItems: {\n      optional,\n      format: oneOf[\n         'baseline',\n            'center',\n            'flex-end',\n            'flex-start',\n            'stretch',\n         ],\n      defaultValue: 'stretch',\n   },\n   direction: {\n      optional,\n      format: oneOf[\n         'column',\n            'column-reverse',\n            'row',\n            'row-reverse',\n         ],\n      defaultValue: 'row',\n   },\n   justify: {\n      optional,\n      format: oneOf[\n         'center',\n            'flex-end',\n            'flex-start',\n            'space-around',\n            'space-between',\n            'space-evenly',\n         ],\n      defaultValue: 'flex-start',\n   },\n   spacing: {\n      optional,\n      format: oneOf[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      defaultValue: 0,\n   },\n   wrap: {\n      optional,\n      format: oneOf[\n         'nowrap',\n            'wrap',\n            'wrap-reverse',\n         ],\n      defaultValue: 'wrap',\n   },\n}\n```\n\n### `\u003cColumn\u003e`\n\nA `\u003cColumn\u003e` is a wrapper component that denotes a responsive column of content, residing inside a `\u003cRow\u003e` component.\n\n```javascript\nconst props = {\n   lg: {\n      optional,\n      format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      defaultValue: false,\n   },\n   md: {\n      optional,\n      format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      defaultValue: false,\n   },\n   sm: {\n      optional,\n      format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      defaultValue: false,\n   },\n   xl: {\n      optional,\n      format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      defaultValue: false,\n   },\n   xs: {\n      optional,\n      format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      defaultValue: false,\n   },\n   zeroMinWidth: {\n      optional,\n      format: Boolean,\n      defaultValue: false,\n   },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fmaterial-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytebodger%2Fmaterial-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fmaterial-ui/lists"}