https://github.com/bytebodger/material-ui
A few simple (borderline-silly, they're so simple) wrapper components for Material UI components
https://github.com/bytebodger/material-ui
Last synced: about 1 year ago
JSON representation
A few simple (borderline-silly, they're so simple) wrapper components for Material UI components
- Host: GitHub
- URL: https://github.com/bytebodger/material-ui
- Owner: bytebodger
- License: mit
- Created: 2021-03-31T22:33:26.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-02-06T00:13:22.000Z (over 4 years ago)
- Last Synced: 2025-06-01T16:13:44.578Z (about 1 year ago)
- Language: JavaScript
- Size: 916 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# material-ui
`material-ui` is just a few simple (borderline-silly, they're so _simple_) wrapper components for Material UI. Specifically, the package provides `` and ``, which are meant to provide a more intuitive interface to Material UI's `` component.
Most 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 - ``. This can lead to React code that looks like this:
```jsx
export const SomeComponent = () => {
return <>
Some content
Some more content
>
>
}
```
In 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`.
This 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 ``s. It's also difficult to quickly peruse the code and determine which ``s represent _rows_, and which ones represent _columns_. It just looks like a big pile of `` components (which... it _is_).
This package provides two simple wrapper components that will transform the above code as such:
```jsx
export const SomeComponent = () => {
return <>
Some content
Some more content
>
}
```
## Usage
After installation, import the components:
```jsx
import { Row } from '@toolz/material-ui/dist/Row';
import { Column } from '@toolz/material-ui/dist/Column';
```
## Components
### ``
A `` is a responsive container designed to hold `` components.
```javascript
const props = {
alignContent: {
optional,
format: oneOf[
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
'stretch',
],
defaultValue: 'stretch',
},
alignItems: {
optional,
format: oneOf[
'baseline',
'center',
'flex-end',
'flex-start',
'stretch',
],
defaultValue: 'stretch',
},
direction: {
optional,
format: oneOf[
'column',
'column-reverse',
'row',
'row-reverse',
],
defaultValue: 'row',
},
justify: {
optional,
format: oneOf[
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
'space-evenly',
],
defaultValue: 'flex-start',
},
spacing: {
optional,
format: oneOf[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
defaultValue: 0,
},
wrap: {
optional,
format: oneOf[
'nowrap',
'wrap',
'wrap-reverse',
],
defaultValue: 'wrap',
},
}
```
### ``
A `` is a wrapper component that denotes a responsive column of content, residing inside a `` component.
```javascript
const props = {
lg: {
optional,
format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
defaultValue: false,
},
md: {
optional,
format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
defaultValue: false,
},
sm: {
optional,
format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
defaultValue: false,
},
xl: {
optional,
format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
defaultValue: false,
},
xs: {
optional,
format: oneOf[false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
defaultValue: false,
},
zeroMinWidth: {
optional,
format: Boolean,
defaultValue: false,
},
}
```