emin-dev-toolkit

A collection of reusable React UI components and utility functions.

Install

npm install emin-dev-toolkit tailwind-merge
# If using the Input component:
npm install react-icons

Peer Dependencies

| Package | Required | |---|---| | react >= 18 | ✅ | | tailwind-merge >= 2 | ✅ | | react-icons >= 4 | Only for Input component |

Note: Components use Tailwind CSS classes. Make sure Tailwind is set up in your project. In Next.js files, add "use client" at the top of files that use these components.

Components

Button

import { Button } from 'emin-dev-toolkit'

<Button size="md" onClick={() => alert('clicked!')}>
  Click me
</Button>

// With ripple effect and loading state
<Button withRipple isLoading>Submit</Button>

Props:

| Prop | Type | Default | Description | |---|---|---|---| | size | "sm" \| "md" \| "lg" | "md" | Button size | | isLoading | boolean | false | Shows spinner | | loadingContent | ReactNode | spinner | Custom loading UI | | withRipple | boolean | false | Material ripple effect | | rippleColor | string | rgba(255,255,255,0.4) | Ripple color | | disabled | boolean | — | Disables button | | className | string | — | Extra Tailwind classes |

Input

import { Input } from 'emin-dev-toolkit'

<Input label="Email" placeholder="[email protected]" />
<Input label="Password" type="password" error="Required" />

Props:

| Prop | Type | Description | |---|---|---| | label | string | Label text | | type | string | Input type (supports password toggle) | | error | string | Error message below input | | className | string | Wrapper div classes | | inputClassName | string | Inner <input> classes |

Modal

import { Modal } from 'emin-dev-toolkit'

const [open, setOpen] = useState(false)

<Modal isOpen={open} onClose={() => setOpen(false)} title="My Modal" size="md">
  <p>Modal content here</p>
</Modal>

Props:

| Prop | Type | Default | Description | |---|---|---|---| | isOpen | boolean | — | Controls visibility | | onClose | () => void | — | Close handler | | size | "sm" \| "md" \| "lg" \| "xl" \| "full" \| "custom" | "md" | Modal width | | closeOnOutsideClick | boolean | true | Click backdrop to close | | closeOnKey | string \| string[] \| null | "Escape" | Key(s) that close modal | | showCloseButton | boolean | true | Show X button |

Utilities

dateFormatter

import { dateFormatter } from 'emin-dev-toolkit'

dateFormatter(new Date(), { format: "dd/MM/yyyy" })     // "24/02/2026"
dateFormatter("2026-02-24", { format: "dd MMM yyyy" })  // "24 Feb 2026"
dateFormatter(new Date(), { format: "full", locale: "en-US" }) // "Monday, February 24, 2026"
dateFormatter(new Date(), { format: "datetime" })        // "24/02/2026 15:22"

Formats: "dd/MM/yyyy" | "MM/dd/yyyy" | "yyyy-MM-dd" | "dd MMM yyyy" | "MMM dd, yyyy" | "dd.MM.yyyy" | "full" | "time" | "datetime"

timeAgo

import { timeAgo } from 'emin-dev-toolkit'

timeAgo(new Date(Date.now() - 3600000)) // "1 hour ago"
timeAgo("2020-01-01")                   // "6 years ago"
timeAgo(new Date(Date.now() + 86400000)) // "in 1 day"

License

MIT