`Fun UI` is a lightweight React Component Library designed to bring a playful and engaging experience to your web applications. With a focus on creative and fun emoticon-based components, `Fun UI` allows developers to add a personal touch to their interfa
npm install @moj-ui/fun-uiFun UI is a lightweight React Component Library designed to bring a playful and engaging experience to your web applications. With a focus on creative and fun emoticon-based components, Fun UI allows developers to add a personal touch to their interfaces effortlessly. Perfect for projects that aim to stand out with unique and interactive elements, Fun UI is both easy to use and highly customizable.
bash
npm install @moj-ui/fun-ui
`
Usage Demo
A basic example of from @moj-ui/fun-ui.
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function App() {
return (
caption={"Looking for Data..."}
captionStyle={{ fontSize: "0.35em" }}
time={1000}
/>
);
}
export default App;
`
$3
!Face Loader example
Components
$3
A collection of fun Loaders built using emoticons which adds an enjoyable touch to your React application.
#### - Face Loader:
Collections of exciting Loaders consisting of face emoticons.
##### Usage:
To use Face Loader component, you can import from @moj-ui/fun-ui and use it in your app.
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
`
Basic usage eg:
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Face Loader Basic output gif
##### Customisation:
You can use in built attritbutes to customise loader according to your personal touch.
###### Attributes:
1. variant: You can use variant attribute to choose from various Variants available according to you want. The default value is 1. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Face Loader gif
2. time: You can change the time interval of loader using time attribute. The time takes time in ms. The default value is 2000 ms. Remember 1 s = 1000 ms.
eg :
To set time interval to 1 sec.
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo1000
To set time interval to 3 sec.
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo3000
3. style: you can use custom CSS according to you need.
eg:
To increase the size & colour of the loader, you can pass an object in style attribute.
`javascript
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
`
Complete Code :
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoStyle
The Default style is:
- color : grey
- size : 4rem
4. caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Looking for Data...
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaption
The default value of caption is none.
you can use captionStyle property to customise caption according to your need.
`javascript
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
##### Variants
| Variant | Loader | Output |
| :-----: | :-----------: | :--------------------------------------------------------------: |
| 1 | (0_0) | !FaceLoader1 |
| 2 | (~0_0~) | !FaceLoader1 |
| 3 | (0_0) | !FaceLoader1 |
| 4 | ( !0_0) | !FaceLoader1 |
| 5 | (o_o) | !FaceLoader1 |
| 6 | (~o_o~) | !FaceLoader1 |
| 7 | (\o_o\) | !FaceLoader1 |
| 8 | ( !o_o) | !FaceLoader1 |
| 9 | (O_O) | !FaceLoader1 |
| 10 | (~O_O~) | !FaceLoader1 |
| 11 | (\O_O\) | !FaceLoader1 |
| 12 | ( !O_O) | !FaceLoader1 |
| 13 | (^\_^) | !FaceLoader1 |
| 14 | (~^\_^~) | !FaceLoader1 |
| 15 | (\^\_^\) | !FaceLoader1 |
| 16 | ( !^\_^) | !FaceLoader1 |
| 17 | (^.^) | !FaceLoader1 |
| 18 | (~^.^~) | !FaceLoader1 |
| 19 | (\^.^\) | !FaceLoader1 |
| 20 | ( !^.^) | !FaceLoader1 |
| 21 | (-\_-) | !FaceLoader1 |
| 22 | ( !-\_-) | !FaceLoader1 |
| 23 | (T_T) | !FaceLoader1 |
| 24 | (\\_\) | !FaceLoader1 |
| 25 | (\o\) | !FaceLoader1 |
| 26 | (\.\) | !FaceLoader1 |
| 27 | (>\_<) | !FaceLoader1 |
| 28 | ("\_") | !FaceLoader1 |
| 29 | ( !"\_") | !FaceLoader1 |
| 30 | (=\_=) | !FaceLoader1 |
| 31 | ( !=\_=) | !FaceLoader1 |
| 32 | (U_U) | !FaceLoader1 |
| 33 | (~U_U~) | !FaceLoader1 |
| 34 | (\U_U\) | !FaceLoader1 |
| 35 | ( !U_U) | !FaceLoader1 |
| 36 | (V_V) | !FaceLoader1 |
| 37 | (~V_V~) | !FaceLoader1 |
| 38 | (\V_V\) | !FaceLoader1 |
| 39 | ( !V_V) | !FaceLoader1 |
| 40 | (U.U) | !FaceLoader1 |
| 41 | (~U.U~) | !FaceLoader1 |
| 42 | (\U.U\) | !FaceLoader1 |
| 43 | ( !U.U) | !FaceLoader1 |
| 44 | ($\_$) | !FaceLoader1 |
| 45 | (X_X) | !FaceLoader1 |
| 46 | ( !X_X) | !FaceLoader1 |
| 47 | (x_x) | !FaceLoader1 |
| 48 | ( !x_x) | !FaceLoader1 |
| 49 | (+\_+) | !FaceLoader1 |
| 50 | ( !+\_+) | !FaceLoader1 |
| 51 | ('\_') | !FaceLoader1 |
| 52 | (~'\_'~) | !FaceLoader1 |
| 53 | (\'\_'\) | !FaceLoader1 |
| 54 | ( !'\_') | !FaceLoader1 |
| 55 | (O_O) - (-_-) | !FaceLoader1 |
#### - Classic Loader:
Collection of Classic Loaders built using Emoticons.
##### Usage
To use Classic Loader component, you can import from @moj-ui/fun-ui and use it in your app.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
`
Basic usage eg:
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Classic Loader Basic output gif
##### Customisation:
You can use in built attritbutes to customise loader according to your personal touch.
###### Attributes:
1. variant: You can use variant attribute to choose from various Variants available according to you want. The default value is 1. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Face Loader gif
2. time: You can change the time interval of loader using time attribute. The time takes time in ms. The default value is 2000 ms. Remember 1 s = 1000 ms.
eg :
To set time interval to 1 sec.
`javascript
import { Classicloader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo1000
To set time interval to 3 sec.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo3000
3. style: you can use custom CSS according to you need.
eg:
To increase the size & colour of the loader, you can pass an object in style attribute.
`javascript
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
`
Complete Code :
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoStyle
The Default style is:
- color : grey
- size : 4rem
4. caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Waiting...
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaption
The default value of caption is none.
you can use captionStyle property to customise caption according to your need.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
#### - Sand Watch Loader:
Add an emoticon Sand Watch as a loader to add an unique touch to your loading screen. Click here to know more.
##### Usage
To use Classic Loader component, you can import from @moj-ui/fun-ui and use it in your app.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
`
Basic usage eg:
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Classic Loader Basic output gif
##### Customisation:
You can use in built attritbutes to customise loader according to your personal touch.
###### Attributes:
1. variant: You can use variant attribute to choose from various Variants available according to you want. The default value is 1. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
!Face Loader gif
2. time: You can change the time interval of loader using time attribute. The time takes time in ms. The default value is 2000 ms. Remember 1 s = 1000 ms.
eg :
To set time interval to 1 sec.
`javascript
import { Classicloader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo1000
To set time interval to 3 sec.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemo3000
3. style: you can use custom CSS according to you need.
eg:
To increase the size & colour of the loader, you can pass an object in style attribute.
`javascript
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
`
Complete Code :
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoStyle
The Default style is:
- color : grey
- size : 4rem
4. caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Waiting for Data...
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaption
The default value of caption is none.
you can use captionStyle property to customise caption according to your need.
`javascript
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
);
}
export default Demo;
`
Output:
FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
5. gap: You can adjust the gap between loader and caption according to your need using gap. gap takes a number to adjust the distance in pixels.
eg:
To add gap of 30px between caption and loader, use:
`javascript
`
Complete example:
`javascript
import { SandWatchLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
`
Output:
![SandWatchLoadergif]
6. offSet: Sometimes loader can be a little asymmetric. Use offSet attribute to adjust the loader to be in center. offSet takes number to adjust the loader. Default value is 0.
eg:
To adjust the above loader to align with the caption, use offset attribute.
`javascript
`
output :
![SandWatchLoadergif]
Complete code:
`javascript
import { SandWatchLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
);
}
export default Demo;
``