1.1.4 • Published 2 years ago
teste-ui-components-reactjs v1.1.4
CONECTE-SE Component Library ReactJS
The purpose of the @conecte-se/ui-components-reactjs library is to help teams design and build products quickly and consistently. The library provides a collection of reusable components, guided by patterns in the design system.
Usage
Install
npm install --save @conecte-se/ui-components-reactjs
Usage component
import React from 'react'
// imports to use the lib
import '@conecte-se/ui-components-reactjs/dist/index.css'
// import to use the custom datepicker and input range
import '@conecte-se/ui-components-reactjs/src/styles/theme/external_lib_themes.scss'
import { Button } from '@conecte-se/ui-components-reactjs'
const ButtonExample = () => {
return <Button>button text</Button>
}
Usage utils (spacing and visibility)
import React, { useState } from 'react'
import '@conecte-se/ui-components-reactjs/src/styles/utils.scss'
const App = () => {
return (
<div>
// m, mt, ml, mb and mr (0 to 5)
<div className="mt-5">Margin</div>
// p, pt, pl, pb and pr (0 to 5)
<div className="pt-5">Padding</div>
// width and height (%): 0, 25, 50, 75 and 100
<div className="w-100 h-100">Width and Height</div>
// visible and invisible (based on visibility property)
<div className="visible">Visible</div>
// display-visible and display-invisible (based on display property)
<div className="display-visible">Display visible</div>
</div>
)
}
Usage theme
import React, { useState } from 'react'
// import the theme and the component used to change it
import { Button, useTheme } from '@conecte-se/ui-components-reactjs'
const App = () => {
const [theme, setTheme] = useTheme()
const [operationTheme, setOperationTheme] = useState(theme === 'dark')
const changeThemeMode = (localTheme) => {
setTheme(localTheme ? 'dark' : 'light')
setOperationTheme(localTheme)
}
return (
<Button
ghost
onClick={() => {
changeThemeMode(!operationTheme)
}}
>
{theme}
</Button>
)
}
Note: the theme will be stored in the browser's local storage.
License
MIT License