@mdkroon/react-ui-components
React ui components library
Install
npm install --save @mdkroon/react-ui-components
Usage
Import the components from @mdkroon/react-ui-components
import React from 'react'
import { Gutter, MaxWidth, Spacer } from '@mdkroon/react-ui-components'
const YourComponent = () => {
return (
<MaxWidth size={1200}>
<Gutter size={12}>
Some text here
<Spacer height={10}/>
More text here
</Gutter>
</MaxWidth>
)
}
export default YourComponent
Gutter
Prop | Type | Required | Default | Note |
---|---|---|---|---|
size | number | yes | - | gutter size i.e. the padding-left and padding-right |
children | node | yes | - | content of the component |
className | string or object | no | gutter |
CSS classname or CSS Module |
unit | string | no | px |
to change the unit of the size (to % or vw ) |
MaxWidth
Prop | Type | Required | Default | Note |
---|---|---|---|---|
size | number | yes | - | maximum with of the content |
children | node | yes | - | content of the component |
className | string or object | no | max-width |
CSS classname or CSS Module |
unit | string | no | px |
to change the unit of the size (to % or vw ) |
Spacer
Prop | Type | Required | Default | Note |
---|---|---|---|---|
height | number | yes | - | height in px of de spacer |
className | string or object | no | spacer |
CSS classname or CSS Module |
Example
An example can be viewed on github pages
Credits
This project is bootstrapped with create react library
License
GNU GPLv3 © MDKroon