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 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.
- Playful Emoticons: Inject fun and personality into your website with a wide range of emoticon-based components.
- Customizable: Tailor the components to match your brand’s style and preferences.
- Seamless Integration: Easily integrate components into your project with minimal setup.
To install the package, use npm:
npm install @moj-ui/fun-ui
A basic example of <FaceLoader />
from @moj-ui/fun-ui
.
import { FaceLoader } from "@moj-ui/fun-ui";
function App() {
return (
<div className="App">
<FaceLoader
variant={1}
caption={"Looking for Data..."}
captionStyle={{ fontSize: "0.35em" }}
time={1000}
/>
</div>
);
}
export default App;
A collection of fun Loaders built using emoticons which adds an enjoyable touch to your React application.
Collections of exciting Loaders consisting of face emoticons.
To use Face Loader component, you can import <FaceLoader />
from @moj-ui/fun-ui
and use it in your app.
import { FaceLoader } from "@moj-ui/fun-ui";
Basic usage eg:
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<FaceLoader />
</div>
);
}
export default Demo;
You can use in built attritbutes to customise loader according to your personal touch.
-
variant: You can use
variant
attribute to choose from various Variants available according to you want. Thedefault
value is1
. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<FaceLoader variant={20} />
</div>
);
}
export default Demo;
-
time: You can change the time interval of loader using
time
attribute. Thetime
takes time inms
. Thedefault
value is2000
ms. Remember1 s = 1000 ms
.
eg :
To set time interval to 1 sec.
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<FaceLoader time={1000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo1000
To set time interval to 3 sec.
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<FaceLoader time={3000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo3000
- 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.
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
Complete Code :
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
<div className="demo">
<FaceLoader style={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoStyle
The Default style
is:
- color : grey
- size : 4rem
- caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Looking for Data...
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<FaceLoader caption={"Looking for Data..."} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaption
The default value of caption
is none
.
you can use captionStyle
property to customise caption according to your need.
import { FaceLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
<div className="demo">
<FaceLoader caption={"Looking for Data..."} captionStyle={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
Collection of Classic Loaders built using Emoticons.
To use Classic Loader component, you can import <ClassicLoader />
from @moj-ui/fun-ui
and use it in your app.
import { ClassicLoader } from "@moj-ui/fun-ui";
Basic usage eg:
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader />
</div>
);
}
export default Demo;
You can use in built attritbutes to customise loader according to your personal touch.
-
variant: You can use
variant
attribute to choose from various Variants available according to you want. Thedefault
value is1
. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader variant={1} />
</div>
);
}
export default Demo;
-
time: You can change the time interval of loader using
time
attribute. Thetime
takes time inms
. Thedefault
value is2000
ms. Remember1 s = 1000 ms
.
eg :
To set time interval to 1 sec.
import { Classicloader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader time={1000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo1000
To set time interval to 3 sec.
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader time={3000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo3000
- 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.
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
Complete Code :
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
<div className="demo">
<ClassicLoader style={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoStyle
The Default style
is:
- color : grey
- size : 4rem
- caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Waiting...
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader caption={"Waiting..."} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaption
The default value of caption
is none
.
you can use captionStyle
property to customise caption according to your need.
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
<div className="demo">
<ClassicLoader caption={"Waiting..."} captionStyle={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
Add an emoticon Sand Watch as a loader to add an unique touch to your loading screen. Click here to know more.
To use Classic Loader component, you can import <ClassicLoader />
from @moj-ui/fun-ui
and use it in your app.
import { ClassicLoader } from "@moj-ui/fun-ui";
Basic usage eg:
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader />
</div>
);
}
export default Demo;
You can use in built attritbutes to customise loader according to your personal touch.
-
variant: You can use
variant
attribute to choose from various Variants available according to you want. Thedefault
value is1
. Choose the index of the loader you want to choose. Click here to see the available Face Loaders.
eg:
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader variant={1} />
</div>
);
}
export default Demo;
-
time: You can change the time interval of loader using
time
attribute. Thetime
takes time inms
. Thedefault
value is2000
ms. Remember1 s = 1000 ms
.
eg :
To set time interval to 1 sec.
import { Classicloader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader time={1000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo1000
To set time interval to 3 sec.
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader time={3000} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemo3000
- 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.
const newStyle = {
color: "green", // To change the color to green.
fontSize: "6em", // To change the size of Loader to 6em.
};
Complete Code :
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "6em",
};
return (
<div className="demo">
<ClassicLoader style={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoStyle
The Default style
is:
- color : grey
- size : 4rem
- caption: You can add a caption to you loader to make it even more personal.
eg:
To add caption Waiting for Data...
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<ClassicLoader caption={"Waiting for Data..."} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaption
The default value of caption
is none
.
you can use captionStyle
property to customise caption according to your need.
import { ClassicLoader } from "@moj-ui/fun-ui";
function Demo() {
const newStyle = {
color: "green",
fontSize: "2em",
};
return (
<div className="demo">
<ClassicLoader caption={"Waiting for Data..."} captionStyle={newStyle} />
</div>
);
}
export default Demo;
Output: FaceLoaderDemoCaptionStyle
the default style of caption is:
- color : grey
- size : 0.35em
-
gap: You can adjust the gap between loader and caption according to your need using
gap
.gap
takes a number to adjust the distance inpixels
.
eg:
To add gap of 30px
between caption and loader, use:
<SandWatchLoader caption={"Waiting for Data..."} gap={30} />
Complete example:
import { SandWatchLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<SandWatchLoader caption={"Waiting for Data..."} gap={30} />
</div>
);
}
export default Demo;
Output:
![SandWatchLoadergif]
-
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 is0
.
eg:
To adjust the above loader to align with the caption, use offset
attribute.
<SandWatchLoader caption={"Waiting for Data..."} offSet={20} gap={30} />
output : ![SandWatchLoadergif]
Complete code:
import { SandWatchLoader } from "@moj-ui/fun-ui";
function Demo() {
return (
<div className="demo">
<SandWatchLoader caption={"Waiting for Data..."} offSet={20} gap={30} />
</div>
);
}
export default Demo;
Variant | Loader | Output |
---|---|---|
1 | |>=<| | gif |
2 | [>=<] | gif |
3 | ]>=<[ | gif |
4 | I>=<I | gif |
5 | >=< | gif |
6 | |}={| | gif |
7 | [}={] | gif |
8 | }={ | gif |
9 | |>-<| | gif |
10 | [>-<] | gif |
11 | ]>-<[ | gif |
12 | I>-<I | gif |
13 | >-< | gif |
14 | |}-{| | gif |
15 | [}-{] | gif |
16 | }-{ | gif |
Collections of Old-School & Classic emoticons as well as many more. You can choose from many classic as well as fun emoticons to make your React App fun and interactive.
Collection of Classic-Old school emoticons.
Collection of Face emoticons to add a fun & personal touch to your React App. Click here to know more.