@ucheeddev/refine-core NPM

@ucheeddev/refine-core 🚀

npm npm bundle size npm downloads

A utility package for general Refine-powered web development. This package provides reusable hooks 🪝, utilities 🛠️, and components 🧩 to speed up your development and maintain consistency across projects.

🌟 Features

🪝 Hooks: Simplify state management and other React tasks.
🛠️ Utils: Common utility functions for everyday programming needs.
🧩 Components: Prebuilt, customizable UI components.

📦 Installation

Install the package via npm:

npm install @ucheeddev/refine-core

🚀 Getting Started

Import Structure 📂

The package is organized into three main modules:

Hooks
Import like this:

import { useCustomHook } from '@ucheeddev/refine-core/hooks';

Utils
Use utility functions like this:

import { formatDate } from '@ucheeddev/refine-core/utils';

Components
Add components to your project:

import { CustomButton } from '@ucheeddev/refine-core/components';

🪝 Available Hooks

`useCustomHook`

A powerful hook for handling XYZ.

Usage Example:

import { useCustomHook } from '@ucheeddev/refine-core/hooks';

const MyComponent = () => {
  const [state, setState] = useCustomHook();
  return <div>{state}</div>;
};

🛠️ Available Utilities

`formatDate`

Format a date string into a human-readable format.

Usage Example:

import { formatDate } from '@ucheeddev/refine-core/utils';

const date = '2025-01-01';
console.log(formatDate(date)); // Output: Jan 1, 2025

🧩 Available Components

`CustomButton`

A reusable button component with customizable styles and behaviors.

Props:
| Prop | Type | Description | |----------|----------|---------------------------| | label | string | The text displayed on the button. | | onClick| function | A function triggered when the button is clicked. |

Usage Example:

import { CustomButton } from '@ucheeddev/refine-core/components';

const App = () => (
  <CustomButton label="Click Me" onClick={() => alert('Button clicked!')} />
);