base-designed-components v1.0.8
base-designed-components
Some beautiful components that I decided to code
Install
npm install --save base-designed-componentsUsage
SideBarTemplate
A component to serve as a template for simple systems. The idea is to have a sidebar and a fixed header around the content. Pure component:
The area where the content will stay (in grey):
Component with content usage example:
import React from 'react'
import { SideBarTemplate } from 'base-designed-components'
import 'base-designed-components/dist/index.css'
const notifyW = require('./icons/notify-w.png')
const fakeMenus = new Array(6).fill({
key: Math.random(100),
label: 'Label',
path: '/path',
icon: notifyW
})
const App = () => {
return (
<SideBarTemplate
menus={fakeMenus}
userName={'Ulf Anderson'}
theme={{ userInfoColor: 'red', theme: 'dark' }}
maxWidth
>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
width: '100%',
justifyContent: 'space-around',
height: '100%'
}}
>
{new Array(20).fill(0).map((_, i) => (
<div
key={i}
style={{
marginTop: 16,
width: '22%',
height: 200,
background: 'lightgreen'
}}
></div>
))}
</div>
</SideBarTemplate>
)
}Props
| Prop | Type | Default | Note |
|---|---|---|---|
| theme | object | Base theme for component design. Colors and theme type. See the next section to better understand this property | |
| menus | array | [] | Array of json indicating which menus should be built in the sidebar |
| maxWidth | bool | false | Defines if the layout will grow with the user's screen or if it will have a maximum limit. |
| onClickOption | func | Function called when a click on the sidebar button happens. It is only called when the navigator property is null | |
| navigator | func, any | Main function/object of libraries like react-navigation. Pass the navigator and the navigator.push(path) function will automatically run when a sidebar button is clicked | |
| userName | string | null | Text on the left side of the user photo |
| customSidebarHeader | func, element | Custom header for the sidebar | |
| customSidebarFooter | func, element | Custom footer for the sidebar | |
| customFooter | func, element | Custom footer for the template | |
| profileIcon | func, element, string | Url/Component for User Photo |
Theme Prop
Default:
{
light: {
text: 'black',
textLight: '#9b9a9f',
primary: 'rgba(0, 84, 240)',
secondary: '',
third: ''
},
dark: {
text: 'white',
textLight: '#9b9a9f',
primary: 'rgba(0, 84, 240)',
secondary: '',
third: ''
},
theme: 'dark',
darkColor: 'linear-gradient(#1e1e2f,#1e1e24)',
lightColor: '#f5f6fa',
userLogoBackground: '#fcc2c8',
userInfoColor: '#bea5ce'
}The component colors that are used are in that object. If you want to change from light to dark theme, just change the value of the theme key to dark and vice versa. It can be done for example: <SideBarTemplate {...props} theme={{ userInfoColor: 'red', theme: 'dark' }}> In this case we are changing the color value of the username that is next to the profile picture, and changing the theme to dark.
Menus Prop
The menus property must be an array of objects with this format:
{
key: Math.random(100),
label: 'Label',
path: '/path',
icon: notifyW
}Key: If not passed, the element's index will be used as key.Label: The text that the user will read in the sidebar.Path: Which url should this menu send to.Icon: It can be a string for the icon path, or a custom component/element.
License
MIT © HenriqueRamos13