@mono-light/ui

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[]	[]