@mkgalaxy/ultimate-utils
Advanced tools
A versatile npm package with TypeScript utilities, React components, and Parse Server integration. Works seamlessly with Next.js, React, and Node.js.
A versatile npm package with TypeScript utilities, React components, and Parse Server integration. Works seamlessly with React, Next.js, and vanilla JavaScript/TypeScript projects.
npm install @your-org/ultimate-utils
# or
yarn add @your-org/ultimate-utils
# or
pnpm add @your-org/ultimate-utils
import { formatDate, debounce, isValidEmail } from '@your-org/ultimate-utils/utils';
// Format dates
const formatted = formatDate(new Date());
// Debounce functions
const debouncedSearch = debounce((query: string) => {
console.log('Searching:', query);
}, 300);
// Validate email
const valid = isValidEmail('user@example.com');
// In your app initialization (e.g., _app.tsx for Next.js or App.tsx for React)
import { initializeParse } from '@your-org/ultimate-utils';
initializeParse({
serverURL: 'https://your-parse-server.com/parse',
appId: 'your-app-id',
javascriptKey: 'your-javascript-key',
});
// app/layout.tsx (Next.js 13+) or App.tsx (React)
'use client';
import { ParseProvider } from '@your-org/ultimate-utils/react';
export default function RootLayout({ children }) {
const parseConfig = {
serverURL: process.env.NEXT_PUBLIC_PARSE_SERVER_URL!,
appId: process.env.NEXT_PUBLIC_PARSE_APP_ID!,
javascriptKey: process.env.NEXT_PUBLIC_PARSE_JS_KEY,
};
return (
<html lang="en">
<body>
<ParseProvider config={parseConfig}>{children}</ParseProvider>
</body>
</html>
);
}
'use client';
import { Button, Input, ParseDataFetcher } from '@your-org/ultimate-utils/react';
export default function MyPage() {
return (
<div>
<Button variant="primary" onClick={() => alert('Clicked!')}>
Click Me
</Button>
<Input label="Email" type="email" placeholder="Enter your email" />
<ParseDataFetcher
className="Post"
options={{ limit: 10, descending: 'createdAt' }}
renderData={(posts) => (
<div>
{posts.map((post) => (
<div key={post.id}>
<h3>{post.get('title')}</h3>
<p>{post.get('content')}</p>
</div>
))}
</div>
)}
/>
</div>
);
}
import { Button, Input } from '@your-org/ultimate-utils/react';
function App() {
return (
<div>
<Button variant="secondary" size="large">
My Button
</Button>
<Input label="Username" helperText="Enter your username" />
</div>
);
}
'use client';
import { useParseQuery, useParseMutation } from '@your-org/ultimate-utils/react';
function MyComponent() {
// Fetch data
const { data, loading, error, refetch } = useParseQuery('Post', {
limit: 10,
descending: 'createdAt',
});
// Mutate data
const { mutate, remove } = useParseMutation('Post');
const handleCreate = async () => {
await mutate({ title: 'New Post', content: 'Content here' });
refetch();
};
const handleDelete = async (id: string) => {
await remove(id);
refetch();
};
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<button onClick={handleCreate}>Create Post</button>
{data.map((post) => (
<div key={post.id}>
<h3>{post.get('title')}</h3>
<button onClick={() => handleDelete(post.id)}>Delete</button>
</div>
))}
</div>
);
}
import {
fetchParseData,
saveParseObject,
deleteParseObject,
getParseObjectById,
} from '@your-org/ultimate-utils';
// Fetch data
const posts = await fetchParseData('Post', {
limit: 20,
descending: 'createdAt',
});
// Create or update
const newPost = await saveParseObject('Post', {
title: 'My Post',
content: 'Post content',
});
// Get by ID
const post = await getParseObjectById('Post', 'postId123');
// Delete
await deleteParseObject('Post', 'postId123');
formatDate(date, locale?) - Format datesdebounce(func, wait) - Debounce function callsdeepClone(obj) - Deep clone objectsgenerateId() - Generate unique IDsisValidEmail(email) - Validate email formattruncateText(text, maxLength) - Truncate text with ellipsissleep(ms) - Async sleep/waitgroupBy(array, key) - Group array by keyinitializeParse(config) - Initialize Parse ServerfetchParseData(className, options?) - Fetch data from ParsesaveParseObject(className, data, objectId?) - Create/update objectdeleteParseObject(className, objectId) - Delete objectgetParseObjectById(className, objectId, include?) - Get single objectuseParseQuery(className, options?) - Fetch Parse data with ReactuseParseMutation(className) - Mutate Parse datauseParse() - Access Parse contextParseProvider - Initialize Parse for React appParseDataFetcher - Generic data fetching componentButton - Reusable button componentInput - Reusable input componentFor Next.js projects, create a .env.local file:
NEXT_PUBLIC_PARSE_SERVER_URL=https://your-parse-server.com/parse
NEXT_PUBLIC_PARSE_APP_ID=your-app-id
NEXT_PUBLIC_PARSE_JS_KEY=your-javascript-key
This package is written in TypeScript and includes type definitions. No need for @types packages.
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
FAQs
A versatile npm package with TypeScript utilities, React components, and Parse Server integration. Works seamlessly with Next.js, React, and Node.js.
We found that @mkgalaxy/ultimate-utils demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PolinRider expands across npm, Packagist, Go modules, and Chrome extensions, using hidden loaders to target developer environments.
Security News
Open source attacks are accelerating as AI coding agents pull in dependencies faster, with less human review.
Research
/Security News
Malicious Chrome and Firefox extensions posed as free VPNs while stealing clipboard data through later extension updates.