+ {/* Initialize MumpUI */}
+
+
+
+
+
)
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render("})]}),o.jsxs("li",{children:["Blockquote ",o.jsx("code",{children:""})]})]})]})]}),o.jsx("h2",{children:"Inline elements example"}),o.jsxs("p",{children:["Risus sed vulputate odio ut enim blandit volutpat. ",o.jsx("em",{children:"Congue eu consequat"})," ac felis donec et. Arcu felis"," ",o.jsx("a",{href:"https://neilveil.github.io/mumpui",target:"_blank",rel:"noreferrer",children:"MumpUI"})," ","ut tristique et egestas.",o.jsx("mark",{children:"Senectus et netus et malesuada fames. Amet risus nullam eget felis."})," Est ullamcorper eget nulla facilisi ",o.jsx("del",{children:"etiam"})," dignissim. Sed felis eget velit aliquet. Morbi tincidunt ornare massa eget."]}),o.jsxs("p",{children:["Orci eu lobortis elementum nibh. Euismod lacinia at quis risus. ",o.jsx("b",{children:"Condimentum"})," lacinia quis vel eros donec."]}),o.jsxs("p",{children:["Pulvinar pellentesque habitant morbi tristique. Sapien ",o.jsx("i",{children:"pellentesque habitant"})," morbi tristique. Mi eget",o.jsx("code",{children:"mauris"})," pharetra et ",o.jsx("u",{children:"ultrices neque"})," ornare aenean euismod."]}),o.jsx("h2",{children:"Block elements example"}),o.jsx("h3",{children:"Headers"}),o.jsx("h1",{children:"H1"}),o.jsx("h2",{children:"H2"}),o.jsx("h3",{children:"H3"}),o.jsx("h4",{children:"H4"}),o.jsx("hr",{}),o.jsx("h3",{children:"List"}),o.jsx("h4",{children:"Ordered list"}),o.jsxs("ol",{children:[o.jsx("li",{children:"First item"}),o.jsx("li",{children:"Second item"}),o.jsx("li",{children:"Third item"})]}),o.jsx("h4",{children:"Unordered list"}),o.jsxs("ul",{children:[o.jsx("li",{children:"First item"}),o.jsx("li",{children:"Second item"}),o.jsx("li",{children:"Third item"})]}),o.jsx("h3",{children:"Table"}),o.jsxs("table",{children:[o.jsx("thead",{children:o.jsxs("tr",{children:[o.jsx("th",{children:"Syntax"}),o.jsx("th",{children:"Description"})]})}),o.jsxs("tbody",{children:[o.jsxs("tr",{children:[o.jsx("td",{children:"Header"}),o.jsx("td",{children:"Title"})]}),o.jsxs("tr",{children:[o.jsx("td",{children:"Paragraph"}),o.jsx("td",{children:"Text"})]})]})]}),o.jsx("h3",{children:"Divider"}),o.jsx("hr",{}),o.jsx("h3",{children:"Blockquote"}),o.jsx("blockquote",{children:o.jsx("p",{children:"This is an example of blockquote."})})]})})})}const Nv=` +const [color, setColor] = useState('#0A94FF') + +.. + +
west Back
home Home
light_mode
MumpUI / Component / Button
Default buttons
copy
code Show code
Customization
copy
code Show code
Do not forget to install some icons pack like Google Fonts (Free) , Font Awesome, Stream Line etc to use icons.
Button component props| Name | Type | Usage |
|---|---|---|
.. | All button element props | |
primary | boolean | To set the primary button |
west Back
home Home
light_mode
MumpUI / Component / Chain
Chain component
copy
code Show code
Decors
/
Lamps
/
Table Lamp
Chain component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
items | array | Array of string or jsx |
seperator | array | Array of string or jsx (Default: /) |
west Back
home Home
light_mode
MumpUI / Component / Checkbox
Single
copy
code Show code
Multiple
copy
code Show code
Evenly distributed
copy
code Show code
Checkbox component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string | |
checked | boolean | |
onChange | function | |
disabled | boolean |
Checkboxes component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of objects of key & label |
checked | array | Array of selected options keys |
onChange | function | |
disabled | boolean |
west Back
home Home
light_mode
MumpUI / Component / Code
Add code snippets like below with PrismJS. Create your custom theme here & import the JS & CSS provided at the bottom of the page in the index.html file.
Note: Only import languages that are actually used in your application as every language imported increases the size of the application.
const snippet = `
+function fun () {
+ return (
+ <div>Hello there!</div>
+ )
+}`
+
+<Code snippet={snippet} lang='jsx' />Code | Name | Type | Usage |
|---|---|---|
.. | All div element props | |
snippet | string | |
lang | string | Check all available languages here |
west Back
home Home
light_mode
MumpUI / Component / Color Picker
copy
code Show code
Select color
MumpUI Color Picker is designed in manner that it can be easily used in a form. It uses native input field for better user experience in mobile devices. It supports HSL, Hex & RGB input and a UI color picker tool.
ColorPicker component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
west Back
home Home
light_mode
MumpUI / Component / Confirm
Confirm modal before taking an action
copy
code Show code
Confirm types
copy
code Show code
Nested confirm
copy
code Show code
Confirm.init| Name | Type | Usage |
|---|---|---|
title | string | |
description | string | |
onConfirm | function | |
onCancel | function | |
confirmText | string | Confirm button text |
cancelText | string | Cancel button text |
type | string | successerrorwarninfo |
Confirm.clear| Name | Type | Usage |
|---|---|---|
| Empty |
Close all confirm modals
west Back
home Home
light_mode
MumpUI / Component / Dashboard
copy
code Show code
Data management examples
copy
code Show code
copy
code Show code
copy
code Show code
Customizations
copy
code Show code
copy
code Show code
MumpUI dashboard has default max-width of
1366px which can be customized.Loader & placeholder
copy
code Show code
copy
code Show code
Sidebar component props| Name | Type | Usage |
|---|---|---|
sidebarImg | boolean | Sidebar image |
sidebarItems | array | Sidebar items list, check example above |
onSidebarClick | function | Sidebar item click callback |
sidebarAccess | array | Array of strings of sidebar keys to be visible |
sidebarClassName | string | |
sidebarStyle | object |
Header component props| Name | Type | Usage |
|---|---|---|
header | jsx | Header element |
title | string | |
icon | jsx | |
info | string | Extra info after title |
onAdd | function | To show add button in header |
headerSuffix | jsx | |
headerClassName | string | |
headerStyle | object |
Body component props| Name | Type | Usage |
|---|---|---|
loading | boolean | |
empty | boolean | |
search | string | Search field value |
onSearch | function | To show search field |
filter | jsx | Filter element |
bodyClassName | string | |
bodyStyle | object |
Footer component props| Name | Type | Usage |
|---|---|---|
footer | jsx | Footer element |
onDelete | function | To show delete button |
onCreate | function | To show create button |
onUpdate | function | To show update button |
onCancel | function | To show cancel button |
footerClassName | string | |
footerStyle | object |
Pagination component props| Name | Type | Usage |
|---|---|---|
paginationPageSize | number | |
paginationTotalItems | number | |
paginationOffset | number | |
paginationOnChange | function |
Usage similar to Pagination component.
west Back
home Home
light_mode
MumpUI / Component / Datetime
copy
code Show code
Date
Month
Time
MumpUI uses default input field as using any 3rd party package always compromises with the user experience in mobile devices.
Input component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
west Back
home Home
light_mode
MumpUI / Component / Divider
copy
code Show code
More
More
More
Divider component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
align | string | leftrightcenter |
west Back
home Home
light_mode
MumpUI / Component / Field
copy
code Show code
Name
Location
Phone
Mobile
Email
autoCol in the second row is set to true which means if rendered in a device with screen width less than or equal to 1080px i.e. mobile devices, then the elements inside will be rendered in a column.Field component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string |
Fields component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
autoCol | boolean | To render elements inside in a column if screen width is less than colBreakPoint |
colBreakPoint | number | To change default break point used in autoCol (Default: 1080) |
To debug
autoCol, do not forget to refresh after opening the developer tools in the browser.west Back
home Home
light_mode
MumpUI / Component / File
copy
code Show code
Upload images
File component props| Name | Type | Usage |
|---|---|---|
.. | All input element props |
west Back
home Home
light_mode
MumpUI / Component / Form
Form components using
Form, Fields & Fieldcopy
code Show code
Form component props| Name | Type | Usage |
|---|---|---|
.. | All form element props | |
clean | boolean | Turn off auto complete, auto correct, auto capitalize & spell check (Default: false) |
west Back
home Home
light_mode
MumpUI / Component / Input
copy
code Show code
Different input type fields
copy
code Show code
Text
Mobile
Email
URL
Number
Password
Setting the input field “type” auto-selects the suitable keyboard in mobile devices, improving user experience.
Prefix & suffix
copy
code Show code
91
visibility
Input component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
prefix | string | |
onPrefixClick | function | |
suffix | string | |
onSuffixClick | function | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
west Back
home Home
light_mode
MumpUI / Component / List
Unordered list
copy
code Show code
- Lorem ipsum
- dolor sit amet
- consectetur adipiscing
- sed do eiusmod tempor
- ut labore et dolore
- magna aliqua
- Ut enim
- ad minim veniam
Ordered list
copy
code Show code
- Lorem ipsum
- dolor sit amet
- consectetur adipiscing
- sed do eiusmod tempor
- ut labore et dolore
- magna aliqua
- Ut enim
- ad minim veniam
List component props| Name | Type | Usage |
|---|---|---|
.. | All ul & ol element props | |
items | array | Array of string & string[] |
type | string | ul | ol (Default: ul) |
west Back
home Home
light_mode
MumpUI / Component / Loader
Kindly take note that the displayed component itself is a loader, rather than indicating that something is in the process of loading.
copy
code Show code
Loading..
Custom text
copy
code Show code
Connecting..
Empty
copy
code Show code
Loader component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
empty | boolean | (Default: false) |
west Back
home Home
light_mode
MumpUI / Component / Menu
copy
code Show code
Please note, icon are not packed with MumpUI.
Menu component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
active | string | |
onClick | function | |
items | array | Array of menu item objects |
item object keys| Name | Type | Usage |
|---|---|---|
key | string | |
label | string | |
icon | jsx | |
next | array | Array of menu item object under this item |
onClick function arguments| Name | Type | Usage |
|---|---|---|
key | string | Clicked tab key |
west Back
home Home
light_mode
MumpUI / Component / Message
Success, Info, Warn & Error message
copy
code Show code
Loading message
copy
code Show code
Clear particular message for custom sequence
copy
code Show code
Message.success(text, duration) function arguments| Name | Type | Usage |
|---|---|---|
text | string | Message text |
duration | number | Duration in milliseconds |
Message.info | Message.warn | Message.errorMessage.clear(message) function arguments| Name | Type | Usage |
|---|---|---|
message | symbol | Clear selected message if message argument provided else clear all messages |
west Back
home Home
light_mode
MumpUI / Component / Modal
copy
code Show code
Modal component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
visible | boolean | To set the modal visibility |
onClose | function | To close modal on background click |
west Back
home Home
light_mode
MumpUI / Component / MultiSelect
copy
code Show code
Multi-Select
India
Multi-Select component with search or clear only
copy
code Show code
Multi-Select with search & clear
India
Select.Multi component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of option objects containing key & label |
value | array | Array of selected option objects containing key & label |
onChange | function | |
placeholder | string | |
onSearch | function | Shows search box only if search function is passed |
clearable | boolean | |
disabled | boolean |
Select.search function arguments| Name | Type | Usage |
|---|---|---|
search | string | Searched text |
options | array | Select input field options |
caseSensitive | boolean | (Default: false) |
A basic text based
Search method is provied with Select component. For calling API or any other functionality, search method need to be implemented.west Back
home Home
light_mode
MumpUI / Component / Note
copy
code Show code
Default note!
Red note!
Blue note!
Green note!
Yellow note!
Quote!
Note component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
type | string | redbluegreenyellowquote |
west Back
home Home
light_mode
MumpUI / Component / Pagination
copy
code Show code
/
96
Pagination component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
pageSize | number | Number of items on the page |
totalItems | number | Total number of items |
offset | number | Number of items to be skipped |
onChange | function | To update the offset |
disabled | boolean | Useful when pulling the data through API |
onChange function arguments| Name | Type | Usage |
|---|---|---|
offset | number | Number of items to be skipped |
west Back
home Home
light_mode
MumpUI / Component / Placeholder
Default placeholder
copy
code Show code
No data!
Custom text
copy
code Show code
No data yet!
Empty
copy
code Show code
Placeholder component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
empty | boolean | (Default: false) |
west Back
home Home
light_mode
MumpUI / Component / Radio
copy
code Show code
Evenly distributed
copy
code Show code
Radio component props| Name | Type | Usage |
|---|---|---|
options | array | Array of objects of key & label |
checked | string | Selected option key |
onChange | function | |
disabled | boolean |
west Back
home Home
light_mode
MumpUI / Component / Range
copy
code Show code
Range (10)
Range component props| Name | Type | Usage |
|---|---|---|
.. | All input element props |
west Back
home Home
light_mode
MumpUI / Component / Search
copy
code Show code
Search component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
value | string | Search field value |
onChange | function | Called when when something is typed |
onClick | function | Called on search field click |
placeholder | string | |
closeOnClick | boolean | |
disabled | boolean |
west Back
home Home
light_mode
MumpUI / Component / Select
copy
code Show code
Select
India
Select component with search or clear only
copy
code Show code
Select with search & clear
India
⭐ Native select component
copy
code Show code
Native Select
Native select component is better for mobile devices as it open a native modal for selection.
Select component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of option objects containing key & label |
value | object | Object of key & label |
onChange | function | |
placeholder | string | |
onSearch | function | Shows search box only if search function is passed |
clearable | boolean | |
disabled | boolean | |
valueHOC | function | Selected value HOC to customize selected option |
optionHOC | function | Option HOC to customize option in list |
Select.Native component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
options | array | Array of option objects containing key & label |
value | string | Selected option key |
onChange | function | |
disabled | boolean |
Select.search function arguments| Name | Type | Usage |
|---|---|---|
search | string | Searched text |
options | array | Select input field options |
caseSensitive | boolean | (Default: false) |
A basic text based
Search method is provied with Select component. For calling API or any other functionality, search method need to be implemented.west Back
home Home
light_mode
MumpUI / Component / Table
copy
code Show code
| # | ID | Name | Salary |
|---|---|---|---|
| 1 | 24 | Saige Fuentes | $1000 |
| 2 | 25 | Bowen Higgins | $2000 |
| 3 | 31 | Leighton Kramer | $3000 |
| 4 | 46 | Kylan Gentry | $4000 |
| 5 | 57 | Amelie Griffith | $2000 |
Table component props| Name | Type | Usage |
|---|---|---|
.. | All table element props | |
cols | array | Columns config |
data | array | Table data |
Col object keys| Name | Type | Usage |
|---|---|---|
name | string | Column name |
key | string | Table data object's key to be rendered |
width | number | Colument width |
align | string | left | center | right |
render | function | Customer renderer |
Col.render function arguments| Name | Type | Usage |
|---|---|---|
value | Row data object's key value | |
data | object | Row data object |
index | array | [$row, $col] |
west Back
home Home
light_mode
MumpUI / Component / Tabs
copy
code Show code
Apple
Banana
Orange
Grape
Strawberry
Kiwi
Mango
Pear
Cherry
Pineapple
Plum
Blueberry
Tab component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
items | array | Array of items |
active | string | Active tab key |
onClick | function | To set active tab |
item object keys| Name | Type | Usage |
|---|---|---|
key | string | Unique string key |
label | string | Tab label to show |
onClick function arguments| Name | Type | Usage |
|---|---|---|
key | string | Clicked tab key |
west Back
home Home
light_mode
MumpUI / Component / Textarea
copy
code Show code
Textarea
Textarea with auto height
Textarea component props| Name | Type | Usage |
|---|---|---|
.. | All textarea element props | |
autoHeight | boolean | To automatically increase height with content |
west Back
home Home
light_mode
MumpUI / Component / Tooltip
copy
code Show code
Left
Left tooltip
Top
Top tooltip
Bottom
Bottom tooltip
Right
Right tooltip
Custom delay
copy
code Show code
0
No delay tooltip
2000
2 seconds wait tooltip
Tooltip component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string | Tooltip text |
position | string | toprightbottomleft (Default: top) |
delay | number | Tooltip delay in milliseconds (Default: 300) |
Risus sed vulputate odio ut enim blandit volutpat. Risus sed vulputate odio ut enim blandit volutpat.
+
+## Slider
+
+### Default
+
+
+ 
+
+
+
+### x2
+
+
+
+
+
+
+
+
+
+
+### x3
+
+
+
+
+
+
+
+
+
+
+
+
+
+### x4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Youtube video integration
+
+
+
+## Break
+
+
+
+
+
+
+
+*****
+
+## Code block
+
+```jsx
+export default function Main() {
+ return Hello there!
+}
+```
+
+
diff --git a/docs/button.html b/docs/button.html
new file mode 100644
index 00000000..7d85ea19
--- /dev/null
+++ b/docs/button.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+ west Home
light_mode
MumpUI / Component / Button
Default buttons
copy
code Show code
Customization
copy
code Show code
Do not forget to install some icons pack like Google Icons (Free) , Font Awesome, Stream Line etc to use icons.
Button component props| Name | Type | Usage |
|---|---|---|
.. | All button element props | |
primary | boolean | To set the primary button |
west Home
light_mode
MumpUI / Component / Chain
Chain component
copy
code Show code
Decors
/
Lamps
/
Table Lamp
Chain component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
items | array | Array of string or jsx |
seperator | array | Array of string or jsx (Default: /) |
west Home
light_mode
MumpUI / Component / Checkbox
Single
copy
code Show code
Multiple
copy
code Show code
Evenly distributed
copy
code Show code
Checkbox component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string | |
checked | boolean | |
onChange | function | |
disabled | boolean |
Checkboxes component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of objects of key & label |
checked | array | Array of selected options keys |
onChange | function | |
disabled | boolean |
west Home
light_mode
MumpUI / Component / Code
Add code snippets like below with PrismJS. Selected the required languages from here and import the JS as shown below, provided at the bottom of the setup page.
<html>
+ <head>
+ ..
+ </head>
+ <body>
+ ..
+ <script src="/prism.js" data-manual></script>
+ </body>
+</html>Import code styling from MumpUI
import 'mumpui/dist/styles/code.css'Usage example
const snippet = `
+function fun () {
+ return (
+ <div>Hello there!</div>
+ )
+}`
+
+<Code snippet={snippet} lang='jsx' />Note
- Do not import the CSS provided by PrismJS as styling is already setup in MumpUI.
- Only import PrismJS languages that are actually used in your application as every language imported increases the build size.
Code component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
snippet | string | Code to be rendered |
lang | string | Check all available languages here |
west Home
light_mode
MumpUI / Component / Color Picker
copy
code Show code
Select color
MumpUI Color Picker is designed in manner that it can be easily used in a form. It uses native input field for better user experience in mobile devices. It supports HSL, Hex & RGB input and a UI color picker tool.
ColorPicker component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
west Home
light_mode
MumpUI / Component / Confirm
Confirm modal before taking an action
copy
code Show code
Confirm types
copy
code Show code
Nested confirm
copy
code Show code
This component does not work if MumpUI is not initialized at the top of the project.
MumpUI Setup →
Confirm.init| Name | Type | Usage |
|---|---|---|
title | string | |
description | string | |
onConfirm | function | |
onCancel | function | |
confirmText | string | Confirm button text |
cancelText | string | Cancel button text |
type | string | successerrorwarninfo |
Confirm.clear| Name | Usage | |
|---|---|---|
| Empty |
Close all confirm modals
west Home
light_mode
MumpUI / Component / Dashboard
copy
code Show code
Data management examples
copy
code Show code
copy
code Show code
copy
code Show code
Customizations
copy
code Show code
copy
code Show code
copy
code Show code
MumpUI dashboard has default max-width of 1366px which can be customized.
Loader & placeholder
copy
code Show code
copy
code Show code
Sidebar component props| Name | Type | Usage |
|---|---|---|
sidebar | jsx | Sidebar element |
Header component props| Name | Type | Usage |
|---|---|---|
header | jsx | Header element |
title | string | |
icon | jsx | |
info | string | Extra info after title |
onAdd | function | To show add button in header |
headerSuffix | jsx | |
headerClassName | string | |
headerStyle | object |
Body component props| Name | Type | Usage |
|---|---|---|
loading | boolean | |
empty | boolean | |
search | string | Search field value |
onSearch | function | To show search field |
filter | jsx | Filter element |
bodyClassName | string | |
bodyStyle | object |
Footer component props| Name | Type | Usage |
|---|---|---|
footer | jsx | Footer element |
onDelete | function | To show delete button |
onCreate | function | To show create button |
onUpdate | function | To show update button |
onCancel | function | To show cancel button |
footerClassName | string | |
footerStyle | object |
Dashboard component global configuration
copy
<MumpUI
+ dashboard={{
+ // Use a common sidebar on all dashboard pages
+ sidebar: {<div> .. </div>}
+ }}
+/>west Home
light_mode
MumpUI / Component / Datetime
copy
code Show code
Date
Month
Time
MumpUI uses default input field as using any 3rd party package always compromises with the user experience in mobile devices.
Input component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
west Home
light_mode
MumpUI / Component / Divider
copy
code Show code
More
More
More
Divider component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
align | string | leftrightcenter |
west Home
light_mode
MumpUI / Component / Field
copy
code Show code
Name
Location
Phone
Mobile
Email
autoCol in the second row is set to true which means if rendered in a device with screen width less than or equal to 1080px i.e. mobile devices, then the elements inside will be rendered in a column.
Field component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string |
Fields component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
autoCol | boolean | To render elements inside in a column if screen width is less than colBreakPoint |
colBreakPoint | number | To change default break point used in autoCol (Default: 1080) |
To debug autoCol, do not forget to refresh after opening the developer tools in the browser.
west Home
light_mode
MumpUI / Component / File
copy
code Show code
Upload images
File component props| Name | Usage | |
|---|---|---|
.. | All input element props |
west Home
light_mode
MumpUI / Component / Form
Form components using
Form, Fields & Fieldcopy
code Show code
Form component props| Name | Type | Usage |
|---|---|---|
.. | All form element props | |
clean | boolean | Turn off auto complete, auto correct, auto capitalize & spell check (Default: true) |
west Home
light_mode
MumpUI / Component / Input
copy
code Show code
copy
code Show code
Different input type fields
copy
code Show code
Text
Mobile
Email
URL
Number
Password
Setting the input field “type” auto-selects the suitable keyboard in mobile devices, improving user experience.
Prefix & suffix
copy
code Show code
91
visibility
Input component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
prefix | string | |
onPrefixClick | function | |
suffix | string | |
onSuffixClick | function | |
onValue | function | Better alternative of onChange listener (value) => void. No need to do e.target.value |
maxLength | number | Maximum characters allowed |
parentClassName | string | To add class on wrapper div |
parentStyle | object | To add styling on wrapper div |
west Home
light_mode
MumpUI / Component / List
Unordered list
copy
code Show code
- Lorem ipsum
- dolor sit amet
- consectetur adipiscing
- sed do eiusmod tempor
- ut labore et dolore
- magna aliqua
- Ut enim
- ad minim veniam
Ordered list
copy
code Show code
- Lorem ipsum
- dolor sit amet
- consectetur adipiscing
- sed do eiusmod tempor
- ut labore et dolore
- magna aliqua
- Ut enim
- ad minim veniam
List component props| Name | Type | Usage |
|---|---|---|
.. | All ul & ol element props | |
items | array | Array of string & string[] |
type | string | ul | ol (Default: ul) |
west Home
light_mode
MumpUI / Component / Loader
Kindly take note that the displayed component itself is a loader, rather than indicating that something is in the process of loading.
copy
code Show code
Loading..
Custom text
copy
code Show code
Connecting..
Empty
copy
code Show code
Loader component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
empty | boolean | (Default: false) |
west Home
light_mode
MumpUI / Component / Markdown
Render markdown as HTML
copy
code Show code
Title
+Hello there! +
Markdown component props| Name | Usage | |
|---|---|---|
.. | All div element props |
Fetch markdown file
copy
const md = await MD.fetch('/typography.md')Add JSON meta data in markdown content
copy
```
+{
+ "name": "markdown"
+}
+```
+
+<!-- meta-break -->
+
+# Title
+
+Hello there!Parse content & meta data from a markdown content
copy
const { meta, content } = MD.parse(md)west Home
light_mode
MumpUI / Component / Menu
Menu usage for selection
copy
code Show code
Please note, icon are not packed with MumpUI.
Menu usage for navigation
copy
code Show code
Menu component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
active | string | |
onChange | function | |
items | array | Array of menu item objects |
basePath | string | Application base path which is also set in the router |
item object keys| Name | Type | Usage |
|---|---|---|
key | string | |
label | string | |
path | string | Navigate to path on click |
icon | jsx | |
next | array | Array of menu item object under this item |
west Home
light_mode
MumpUI / Component / Message
Success, Info, Warn & Error message
copy
code Show code
Loading message
copy
code Show code
Clear particular message for custom sequence
copy
code Show code
This component does not work if MumpUI is not initialized at the top of the project.
MumpUI Setup →
Message.success function arguments| Name | Type | Usage |
|---|---|---|
text | string | Message text |
duration | number | Duration in milliseconds |
Message.info | Message.warn | Message.errorMessage.clear function arguments| Name | Type | Usage |
|---|---|---|
message | symbol | Clear selected message if message argument provided else clear all messages |
Update default duration & max messages count
copy
// Default duration: 3000ms
+// Default max count: 3
+<MumpUI message={{ duration: 2000, max: 1 }} />west Home
light_mode
MumpUI / Component / Modal
copy
code Show code
Modal component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
title | jsx | Modal title |
buttons | jsx | Modal action buttons |
visible | boolean | To set the modal visibility |
onClose | function | To close modal on background click |
width | string | To change modal width (Default: 600px) |
noScrollbar | boolean | Hide scrollbar on scrollable modals (Default: false) |
noCross | boolean | Hide cross icon from modal header (Default: false) |
west Home
light_mode
MumpUI / Component / MultiSelect
copy
code Show code
Multi-Select
India
Multi-Select with search
India
Multi-Select with clear
India
Multi-Select with search & clear
India
Select.Multi component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of option objects containing key & label |
value | array | Array of selected option objects containing key & label |
onChange | function | |
placeholder | string | |
simpleSearch | function | Show search box in dropdown |
onSearch | function | For advanced search implementation |
clearable | boolean | |
disabled | boolean |
A basic text based Search method is provied with Select component. For calling API or any other functionality, search method need to be implemented with onSearch.
west Home
light_mode
MumpUI / Component / Note
copy
code Show code
Default note!
Red note!
Blue note!
Green note!
Yellow note!
Quote!
Note component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
type | string | redbluegreenyellowquote |
west Home
light_mode
MumpUI / Component / Pagination
copy
code Show code
/
96
Pagination component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
pageSize | number | Number of items on the page |
totalItems | number | Total number of items |
offset | number | Number of items to be skipped |
onChange | function | To update the offset |
disabled | boolean | Useful when pulling the data through API |
onChange function arguments| Name | Type | Usage |
|---|---|---|
offset | number | Number of items to be skipped |
west Home
light_mode
MumpUI / Component / Placeholder
Default placeholder
copy
code Show code
No data!
Custom text
copy
code Show code
No data yet!
Empty
copy
code Show code
Placeholder component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
empty | boolean | (Default: false) |
west Home
light_mode
MumpUI / Component / Radio
copy
code Show code
Evenly distributed
copy
code Show code
Radio component props| Name | Type | Usage |
|---|---|---|
options | array | Array of objects of key & label |
checked | string | Selected option key |
onChange | function | |
disabled | boolean |
west Home
light_mode
MumpUI / Component / Range
copy
code Show code
Range (10)
Range component props| Name | Usage | |
|---|---|---|
.. | All input element props |
west Home
light_mode
MumpUI / Component / Search
copy
code Show code
Search component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
value | string | Search field value |
onChange | function | Called when when something is typed |
onClick | function | Called on search field click |
placeholder | string | |
closeOnClick | boolean | |
disabled | boolean |
west Home
light_mode
MumpUI / Component / Select
copy
code Show code
Select
India
Select with search
India
Select with clear
India
Select with search & clear
India
⭐ Native select component
copy
code Show code
Native Select
Native select component is better for mobile devices as it open a native modal for selection.
Select component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
options | array | Array of option objects containing key & label |
value | object | Object of key & label |
onChange | function | |
placeholder | string | |
simpleSearch | function | Show search box in dropdown |
onSearch | function | For advanced search implementation |
clearable | boolean | |
disabled | boolean | |
valueHOC | function | Selected value HOC to customize selected option |
optionHOC | function | Option HOC to customize option in list |
Select.Native component props| Name | Type | Usage |
|---|---|---|
.. | All input element props | |
options | array | Array of option objects containing key & label |
value | string | Selected option key |
onChange | function | |
disabled | boolean |
A basic text based Search method is provied with Select component. For calling API or any other functionality, search method need to be implemented with onSearch.
west Home
light_mode
MumpUI / Component / Table
copy
code Show code
| # | ID | Name | Salary |
|---|---|---|---|
| 1 | 24 | Saige Fuentes | $1000 |
| 2 | 25 | Bowen Higgins | $2000 |
| 3 | 31 | Leighton Kramer | $3000 |
| 4 | 46 | Kylan Gentry | $4000 |
| 5 | 57 | Amelie Griffith | $2000 |
Table component props| Name | Type | Usage |
|---|---|---|
.. | All table element props | |
cols | array | Columns config |
data | array | Table data |
noHeader | boolean | Do not show table header row |
Col object keys| Name | Type | Usage |
|---|---|---|
name | string | Column name |
key | string | Table data object's key to be rendered |
width | number | Colument width |
align | string | left | center | right |
render | function | Customer renderer |
Col.render function arguments| Name | Type | Usage |
|---|---|---|
value | Row data object's key value | |
data | object | Row data object |
index | array | [$row, $col] |
west Home
light_mode
MumpUI / Component / Tabs
copy
code Show code
Apple
Banana
Orange
Grape
Strawberry
Kiwi
Mango
Pear
Cherry
Pineapple
Plum
Blueberry
Tab component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
items | array | Array of items |
active | string | Active tab key |
onChange | function | To set active tab |
item object keys| Name | Type | Usage |
|---|---|---|
key | string | Unique string key |
label | string | Tab label to show |
west Home
light_mode
MumpUI / Component / Textarea
copy
code Show code
Textarea
Textarea with auto height
copy
code Show code
Textarea
Textarea component props| Name | Type | Usage |
|---|---|---|
.. | All textarea element props | |
autoHeight | boolean | To automatically increase height with content |
maxLength | number | Maximum characters allowed |
parentClassName | string | To add class on wrapper div |
parentStyle | object | To add styling on wrapper div |
west Home
light_mode
MumpUI / Component / Tooltip
copy
code Show code
Left
Left tooltip
Top
Top tooltip
Bottom
Bottom tooltip
Right
Right tooltip
Custom delay
copy
code Show code
0
No delay tooltip
2000
2 seconds wait tooltip
Tooltip component props| Name | Type | Usage |
|---|---|---|
.. | All div element props | |
label | string | Tooltip text |
position | string | toprightbottomleft (Default: top) |
delay | number | Tooltip delay in milliseconds (Default: 300) |
Update default tooltip delay
copy
// Default 300
+<MumpUI message={{ delay: 500 }} />Risus sed vulputate odio ut enim blandit volutpat. Risus sed vulputate odio ut enim blandit volutpat.
+
+## Slider
+
+### Default
+
+
+
+
+
+
+### x2
+
+
+
+
+
+
+
+
+
+
+### x3
+
+
+
+
+
+
+
+
+
+
+
+
+
+### x4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Youtube video integration
+
+
+
+## Break
+
+
+
+
+
+
+
+*****
+
+## Code block
+
+```jsx
+export default function Main() {
+ return Hello there!
+}
+```
+
+
diff --git a/github.png b/github.png
new file mode 100644
index 00000000..50b81752
Binary files /dev/null and b/github.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..7c4906fc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+ 
/
Input14 components
expand_more
Display8 components
expand_more
- Lorem ipsum
- dolor sit amet
- consectetur adipiscing
- sed do eiusmod tempor
- ut labore et dolore
- magna aliqua
- Ut enim
- ad minim veniam
Listeast
| # | ID | Name | Salary |
|---|---|---|---|
| 1 | 24 | Saige Fuentes | $1000 |
| 2 | 25 | Bowen Higgins | $2000 |
| 3 | 31 | Leighton Kramer | $3000 |
Tableeast
Loading..
Loadereast
No data!
Placeholdereast
More
Dividereast
Home
/
Products
/
Price
Chaineast
Hover
Hello there!
Tooltipeast
Feedback4 components
expand_more
Navigation4 components
expand_more
Apple
Banana
Orange
Grape
Strawberry
Kiwi
Mango
Pear
Cherry
Pineapple
Plum
Blueberry
Tabseast
Advanced5 components
expand_more
west Home
light_mode
MumpUI / Setup
Step I - Install
npm i mumpuiStep II - Initialize MumpUI
MumpUI need to be initialized only once at the top.
import MumpUI from 'mumpui'
+
+function App() {
+ return (<div>
+ {/* Initialize MumpUI */}
+ <MumpUI />
+
+ ..
+
+ <BrowserRouter>
+ <Routes>
+ <Route path="/" />
+ ..
+ </Routes>
+ </BrowserRouter>
+ </div>)
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(<App />)Setp III - Import theme
import 'mumpui/dist/styles/core.css'🎉 Voila, good to go! 🚀
west Home
light_mode
MumpUI / Typography
MumpUI / Typography
MumpUI comes prepacked with typography styling, making it ideal for rendering content, blogs, stories and more. Typography elements are of two types:
- Inline elements
- Bold
<b></b> - Italics
<i></i> - Underline
<u></u> - Highlight
<mark></mark> - Strike
<del></del> - Code
<code></code> - Link
<a></a>
- Bold
- Block elements
- Headers
h1h2h3h4 - List
- Ordered list
<ol></ol> - Unordered list
<ul></ul>
- Ordered list
- Table
<table></table> - Divider
<hr /> - Blockquote
<blockquote></blockquote>
- Headers
Inline elements example
Risus sed vulputate odio ut enim blandit volutpat. Congue eu consequat ac felis donec et. Arcu felis MumpUI ut tristique et egestas.Senectus et netus et malesuada fames. Amet risus nullam eget felis. Est ullamcorper eget nulla facilisi etiam dignissim. Sed felis eget velit aliquet. Morbi tincidunt ornare massa eget.
Orci eu lobortis elementum nibh. Euismod lacinia at quis risus. Condimentum lacinia quis vel eros donec.
Pulvinar pellentesque habitant morbi tristique. Sapien pellentesque habitant morbi tristique. Mi egetmauris pharetra et ultrices neque ornare aenean euismod.
Block elements example
Headers
H1
H2
H3
H4
List
Ordered list
- First item
- Second item
- Third item
Unordered list
- First item
- Second item
- Third item
Table
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Divider
Blockquote
This is an example of blockquote.
` + - Blockquote `` + +## Inline elements example + +Risus sed vulputate odio ut enim blandit volutpat. Congue eu consequat ac felis donec et. Arcu felis [MumpUI](https://neilveil.github.io/mumpui) ut tristique et egestas. Senectus et netus et malesuada fames. Amet risus nullam eget felis. Est ullamcorper eget nulla facilisi