emonster-hnc

emonster-hnc (short for emonster hooks and components) is a library of React hooks and components built on top of antd and framer-motion. The library provides a set of reusable UI components and hooks that can help you build beautiful and interactive web applications with ease.

Storybook

You can find examples of the library here.

Tech

emonster-hnc uses a number of open source projects to work properly:

• React - A JavaScript library for building user interfaces!
• Antd - A React UI library that provides a set of high-quality components and patterns for building web and mobile applications
• Framer Motion - A library for adding animation and motion to React components.
• Font Awesome - A library of icons and tools for adding icons to web projects

And of course emonster-hnc itself is open source with a public repository on GitHub.

Installation

To install emonster-hnc, simply run:

npm install emonster-hnc

or

yarn add emonster-hnc

Usage

To use emonster-hnc, you'll need to have antd and framer-motion installed in your project. You can import the components and hooks you need from the library like this:

import { AsyncButton } from 'emonster-hnc';

const App = () => {
  return (
    <AsyncButton onClick={async () => {
        await sleep(500);
      }} 
    />
  )
}

Documentation

You can find the documentation for emonster-hnc in the docs folder of the library. The documentation includes detailed usage instructions, code examples, and API references for all the available components and hooks.

components

AsyncButton

Props	Type	Required	Default Value
onClick	function	true	-
loading	boolean	false	-

DoubleConfirmBtn

Props	Type	Required	Default Value
label	string	true	-
secondaryText	string	true	-
secondaryType	"save" | "danger"	false	"danger"
loading	boolean	false	-
size	SizeType	false	"middle"
onConfirm	function	true	-
shape	ButtonShape	false	"default"
disabled	boolean	false	false

InputStepper

Props	Type	Required	Default Value
stepper	number	false	1
onAdd	function	true	-
onMinus	function	false	-
hideMinus	boolean	false	false
hideAdd	boolean	false	false
setValue	number	true	-
loading	boolean	false	-

LongTextColumn

Props	Type	Required	Default Value
copy	boolean	false	false
text	string	true	-
hoverShow	boolean	false	true
maxWidth	number	true	-
movable	boolean	false	false
style	CSSProperties	false	-

MovableTooltip

Props	Type	Required	Default Value
title	string	true	-
floatContentStyle	CSSProperties	false	-

SpeedDial

Props	Type	Required	Default Value
actionArray	ActionProps	true	-
alwaysShow	boolean	false	true

SpeedDial.ActionProps

Props	Type	Required	Default Value
actionArray	ActionProps	true	-
icon	FontAwesomeIcon	true	-
tooltip	string	true	-
onClick	function	true	-
disabled	boolean	false	false

TextAutoScroll

Props	Type	Required	Default Value
style	CSSProperties	false	-

TypeConfirmModal

Props	Type	Required	Default Value
verifyString	string	true	-
inputPosition	"top" | "bottom"	false	"bottom"

hooks

useClickOutside

useCountdown

useDebounce

useDrag

useEventListener

useHover

useInterval

useLeavePageNotification

useLoading

useMousePosition

usePrevious

useSaveClose

useScroll

useSize

useTrottle

useToggle

useWindowSize

Contributing

If you'd like to contribute to emonster-hnc, feel free to submit a pull request or open an issue on GitHub. We welcome all contributions and feedback!