@moj-ui/fun-ui

1.3.0 • Public • Published

Fun UI

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.

Table of Contents

Features

  • 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.

Installation

To install the package, use npm:

npm install @moj-ui/fun-ui

Usage Demo

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;

Output :

Face Loader example

Components

1. Loader:

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 <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;

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:

import { FaceLoader } from "@moj-ui/fun-ui";

function Demo() {
  return (
    <div className="demo">
      <FaceLoader variant={20} />
    </div>
  );
}
export default Demo;

Output: Face Loader gif

  1. 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.

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

  1. 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
  1. 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
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 <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;

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:

import { ClassicLoader } from "@moj-ui/fun-ui";

function Demo() {
  return (
    <div className="demo">
      <ClassicLoader variant={1} />
    </div>
  );
}
export default Demo;

Output: Face Loader gif

  1. 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.

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

  1. 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
  1. 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

- 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 <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;

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:

import { ClassicLoader } from "@moj-ui/fun-ui";

function Demo() {
  return (
    <div className="demo">
      <ClassicLoader variant={1} />
    </div>
  );
}
export default Demo;

Output: Face Loader gif

  1. 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.

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

  1. 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
  1. 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
  1. 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:

<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]

  1. 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.

<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:
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

2. Emoticons:

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.

- Classic Emoticons:

Collection of Classic-Old school emoticons.

- Face Emoticons:

Collection of Face emoticons to add a fun & personal touch to your React App. Click here to know more.

Readme

Keywords

none

Package Sidebar

Install

npm i @moj-ui/fun-ui

Weekly Downloads

1

Version

1.3.0

License

ISC

Unpacked Size

1.34 MB

Total Files

10

Last publish

Collaborators

  • dev182000