👨💻 React components for the Mojito Platform, Reference App and third-party projects, including Mojito's CoreUI
Version: 1.0.0
You can install this project with one of these commands:
npm install --save @mojito-inc/core-ui
yarn add @mojito-inc/core-ui
Once the package is installed, you can import the library using import;
import { CoreUIThemeProvider } from "@mojitoinc/core-ui";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#FDCC35",
},
secondary: {
main: "#356045",
},
background: {
default: "#000",
},
text: {
primary: "#000",
},
grey: {
100: "#868b93",
},
divider: "#fff",
},
});
<CoreUIThemeProvider theme={ theme }>
<Component {...pageProps} />
</CoreUIThemeProvider>
import { Accordion } from "@mojitoinc/core-ui";
<Accordion
open=<open>
label=<label>
children=<children>
labelStyle=<labelStyle>
collapseIcon=<collapseIcon>
expandIcon=<expandIcon>
/>
Param |
type |
Required |
Default |
Description |
open |
boolean |
|
false |
|
label |
string |
✅ |
|
|
children |
JSX.Element |
✅ |
|
|
labelStyle |
SxProps |
|
|
|
collapseIcon |
JSX.Element |
|
RemoveIcon |
|
expandIcon |
JSX.Element |
|
AddIcon |
|
import { Breadcrumbs, BreadcrumbItem } from "@mojitoinc/core-ui";
<Breadcrumbs
list=<BreadcrumbItem[]>
selectedValue=<selectedValue>
separator=<separator>
separatorStyle=<separatorStyle>
itemStyle=<itemStyle>
itemHighlightedStyle=<itemHighlightedStyle>
/>
Param |
type |
Required |
Default |
Description |
list |
object |
✅ |
[] |
BreadcrumbItem |
selectedValue |
string |
✅ |
|
|
separator |
JSX.Element |
|
NavigateNextIcon |
|
separatorStyle |
SxProps |
|
{ fontSize: 13 } |
|
itemStyle |
SxProps |
|
{ fontWeight: 500, fontSize: '12px' } |
|
itemHighlightedStyle |
SxProps |
|
{ fontWeight: 700, fontSize: '12px', color: '#000' } |
|
Param |
type |
Required |
Description |
label |
string |
✅ |
|
value |
string |
✅ |
|
import { TextInput } from "@mojitoinc/core-ui";
<TextInput
placeholder=<placeholder>
value=<value>
InputPropsStyle=<InputPropsStyle>
sx=<sx>
error=<error>
type=<type>
disabled=<disabled>
autoFocus=<autoFocus>
onChange=<onChange>
/>
Param |
type |
Required |
Default |
Description |
placeholder |
string |
|
|
|
value |
string |
|
|
|
InputPropsStyle |
SxProps |
|
|
|
sx |
SxProps |
|
|
|
error |
string |
|
|
|
type |
string |
|
text |
|
disabled |
boolean |
|
false |
|
autoFocus |
boolean |
|
false |
|
inputRef |
React.Ref
|
|
|
|
onChange |
event(event: React.ChangeEvent)
|
|
|
|
import { BaseModal } from "@mojitoinc/core-ui";
<BaseModal
title=<title>
content=<content>
children<children>
titleStyle=<titleStyle>
contentStyle=<contentStyle>
/>
Param |
type |
Required |
Default |
Description |
title |
string |
|
|
|
content |
string |
|
|
|
children |
JSX.Element |
|
|
|
titleStyle |
SxProps |
|
|
|
contentStyle |
SxProps |
|
|
|
import { TabSwitcher, TabPanel } from "@mojitoinc/core-ui";
<TabSwitcher
value=<value>
children=<children>
/>
<TabPanel
id=<id>
children=<children>
/>
<TabSwitcher value='one'>
<>
<TabPanel id='one'>
<p>one</p>
</TabPanel>
<TabPanel id='two'>
<p>two</p>
</TabPanel>
</>
</TabSwitcher>
Param |
type |
Required |
Default |
Description |
value |
string |
✅ |
|
|
children |
JSX.Element |
✅ |
|
|
Param |
type |
Required |
Default |
Description |
id |
string |
✅ |
|
|
children |
JSX.Element |
✅ |
|
|