@mono-light/ui v0.0.4
Monolight
A lightweight react UI library for monolithic platforms
- Architect mode for quick visualization of layout errors
- Minimal but essential settings for component personalization
Components
Monolight
Monolight is a Mandatory component that handle architectMode and all of the context Parameter.
Wrap your main App with Monolight.Provider, you can also wrap any single Component to give it a custom environment.
Wrapping main App is Mandatory!
import { Monolight } from "@react-layout/monolight";
return <Monolight.Provider value={{
column: 12,
architectMode: {
show: true,
color: '#5c95ff'
},
breakpoints: {
xs: 500,
sm: 800,
md: 1000,
lg: 1200,
xl: 1500
}
}}>
// Your App here
</Monolight.Provider>
Parameter | Values | Default | Mandatory |
---|---|---|---|
column | number | 12 | ❌ |
architectMode | Object | 0 | ❌ |
breakpoints | Object | {} | ❌ |
Container
Container is a component that helps you to contains your content. You can spread your content using fluid Parameter.
import { Container } from "@react-layout/monolight";
return <Container fluid={false}>
// Your content here
</Container>
Parameter | Values | Default | Mandatory |
---|---|---|---|
fluid | bool | false | ❌ |
padding | number | 0 | ❌ |
style | Object | {} | ❌ |
className | String | "" | ❌ |
Row
Row is a component that helps you to organize your content horizontally.
import { Container, Row } from "@react-layout/monolight";
return <Container>
<Row fluid={false}>
// Your content here
</Row>
</Container>
Parameter | Values | Default | Mandatory |
---|---|---|---|
gutter | string or number | 'none' | ❌ |
animate | bool | false | ❌ |
column | number | 12 | ❌ |
style | Object | {} | ❌ |
className | String | "" | ❌ |
Col
Col is a component that helps you to organize your content vertically.
import { Container, Row, Col } from "@react-layout/monolight";
return <Container>
<Row fluid={false}>
<Col>
// Your content here
</Col>
</Row>
</Container>
Parameter | Values | Default | Mandatory |
---|---|---|---|
gutter | string or number | 'none' | ❌ |
animate | bool | false | ❌ |
column | number | 12 | ❌ |
span | number[] | 12, 12, 12, 12, 12 | ❌ |
offset | number[] | 0, 0, 0, 0, 0 | ❌ |
style | Object | {} | ❌ |
className | String | "" | ❌ |
MediaSwitch
MediaSwitch is a component that helps you to manage showing and hiding your components quickly based on screen width. With this component you can easily switch through multiples components and multiples breakpoints.
If you have to change Layout of any Page, Form, CustomComponent based on screen width to make it "Layout Reponsive", use this super-light component
MediaSwitch breakpoints is indipendent by context breakpoints
Components and Breakpoints lengths must be the same
import { MediaSwitch } from "@react-layout/monolight";
return <MediaSwitch childrens={[
<div>This will be shown on Mobile</div>,
<div>This will be shown on Ipad</div>,
<div>This will be shown on Desktop</div>
]}
breakpoints={[
500, 800, 9999
]}/>
TODO: last child should be displayed forever
Parameter | Values | Default | Mandatory |
---|---|---|---|
childrens | React.ReactNode | [] | ✅ |
breakpoints | number[] | [] | ✅ |