RankMonky UI

██████╗  █████╗ ███╗   ██╗██╗  ██╗███╗   ███╗ ██████╗ ███╗   ██╗██╗  ██╗██╗   ██╗
██╔══██╗██╔══██╗████╗  ██║██║ ██╔╝████╗ ████║██╔═══██╗████╗  ██║██║ ██╔╝╚██╗ ██╔╝
██████╔╝███████║██╔██╗ ██║█████╔╝ ██╔████╔██║██║   ██║██╔██╗ ██║█████╔╝  ╚████╔╝
██╔══██╗██╔══██║██║╚██╗██║██╔═██╗ ██║╚██╔╝██║██║   ██║██║╚██╗██║██╔═██╗   ╚██╔╝
██║  ██║██║  ██║██║ ╚████║██║  ██╗██║ ╚═╝ ██║╚██████╔╝██║ ╚████║██║  ██╗   ██║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝  ╚═╝   ╚═╝

                    🎨 Professional React UI Components 🎨

A modern, beginner-friendly React component library with beautiful styling and TypeScript support.

🚀 Quick Start

Install

npm install rankmonky-ui

Optional Dependencies

Some components require additional dependencies. Install them only when you need specific components:

For Date Components (CustomDateRange)

yarn add react-date-range
yarn add date-fns

For PDF Components (CustomPDFRenderer)

yarn add @mikecousins/react-pdf
yarn add pdfjs-dist

Important: PDF components require additional setup for the PDF.js worker file:

1. Copy the worker file to your public directory:

   cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/

2. For Vite projects, ensure your vite.config.ts serves the worker with correct MIME type:

   // Usually works out of the box, but if you encounter MIME type issues:
   export default defineConfig({
     // ... other config
     assetsInclude: ["**/*.mjs"],
   });

3. For production builds, make sure to include the worker file in your deployment:

   • The worker file must be accessible at ${your-domain}/pdf.worker.min.mjs
   • Ensure your server serves .mjs files with application/javascript or text/javascript MIME type

Common Issues & Solutions:

• MIME type error: Make sure pdf.worker.min.mjs exists in your public/ directory
• CORS errors: For external PDFs, the remote server must allow cross-origin requests
• 404 errors: Verify the worker file path matches your public directory structure

Example Usage:

import { CustomPDFRenderer } from "rankmonky-ui";

<CustomPDFRenderer
  source={{
    url: "/your-document.pdf", // Local file or CORS-enabled URL
    title: "My Document",
    downloadable: true,
  }}
  showNavigation={true}
  showPageIndicator={true}
  initialScale={1.0}
/>;

For Audio Components (CustomAudioRenderer)

yarn add react-h5-audio-player

For Video Components (CustomVideoRenderer)

yarn add react-player

For Markdown Components (CustomMarkdown, CustomMarkdownRenderer)

yarn add react-markdown
yarn add react-syntax-highlighter
yarn add highlight.js
yarn add katex
yarn add rehype-autolink-headings
yarn add rehype-external-links
yarn add rehype-highlight
yarn add rehype-katex
yarn add rehype-raw
yarn add rehype-sanitize
yarn add rehype-slug
yarn add remark-breaks
yarn add remark-directive
yarn add remark-emoji
yarn add remark-frontmatter
yarn add remark-gfm
yarn add remark-math
yarn add remark-toc
yarn add remark-wiki-link

For Select Components (CustomAsyncSelect)

yarn add react-select

For Pagination Components (CustomPagination)

yarn add react-paginate

For Router/Breadcrumb Components (CustomBreadcrumbs)

yarn add react-router-dom
yarn add use-react-router-breadcrumbs

Install All Optional Dependencies at Once

yarn add @mikecousins/react-pdf date-fns highlight.js katex pdfjs-dist react-date-range react-h5-audio-player react-markdown react-paginate react-player react-router-dom react-select react-syntax-highlighter rehype-autolink-headings rehype-external-links rehype-highlight rehype-katex rehype-raw rehype-sanitize rehype-slug remark-breaks remark-directive remark-emoji remark-frontmatter remark-gfm remark-math remark-toc remark-wiki-link use-react-router-breadcrumbs

Note: These are optional dependencies to keep the main package lightweight. Only install what you need for the specific components you're using.

Use in Your React App

import React from "react";
import { CustomButton } from "rankmonky-ui";
import "rankmonky-ui/styles";

function App() {
  return (
    <CustomButton variant="primary" size="large">
      Hello RankMonky! 👋
    </CustomButton>
  );
}

That's it! Your button is ready to use.

✨ What You Get

🎯 Easy-to-Use Components

Perfect for beginners, powerful for experts:

// Simple button
<CustomButton>Click me</CustomButton>

// Advanced button with all options
<CustomButton
  variant="primary"
  size="large"
  disabled={false}
  onClick={() => alert('Hello!')}
>
  Advanced Button
</CustomButton>

📝 Form Components

Build forms quickly:

<CustomInput
  label="Your Name"
  placeholder="Enter your name..."
  required
/>

<CustomSelect
  label="Choose Option"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' }
  ]}
/>

<CustomCheckbox label="I agree to terms" />

🎵 Media Components

Display media easily:

<CustomImageRenderer
  src="image.jpg"
  alt="Beautiful image"
/>

<CustomVideoRenderer
  src="video.mp4"
  title="My Video"
/>

<CustomAudioRenderer
  src="audio.mp3"
  title="My Song"
/>

📊 Interactive Components

<CustomProgressbar value={75} max={100} />

<CustomRating
  value={4}
  max={5}
  onChange={(rating) => console.log(rating)}
/>

<CustomMarkdown content="# Hello World!" />

🎨 Styling Made Simple

Default Styling

Just import the styles and you're good to go:

import "rankmonky-ui/styles";

Custom Colors

Change colors easily with CSS variables:

:root {
  --color-primary: #your-brand-color;
  --color-secondary: #your-secondary-color;
}

Dark Mode

Built-in dark mode support:

[data-theme="dark"] {
  /* Dark mode styles automatically applied */
}

📖 All Components

🔘 Buttons & Inputs

• CustomButton - Buttons with different styles
• CustomInput - Text inputs with labels
• CustomSelect - Dropdown selectors
• CustomCheckbox - Checkboxes
• CustomRadio - Radio buttons
• CustomTextArea - Multi-line text input

🎨 Display Components

• CustomMarkdown - Render markdown text
• CustomProgressbar - Show progress
• CustomRating - Star ratings
• CustomTimer - Countdown timers

🎵 Media Components

• CustomImageRenderer - Display images
• CustomVideoRenderer - Video players
• CustomAudioRenderer - Audio players
• CustomPDFRenderer - PDF viewers

⚡ Loading & Icons

• DotBarLoader - Dot loading animation
• SpinnerLoader - Spinning loader
• TextLoader - Text loading animation
• StarIcon - Star icons

🎣 React Hooks

Useful hooks for your components:

import { useDebounce, useClickOutside, useMediaQuery } from "rankmonky-ui";

// Debounce user input
const debouncedValue = useDebounce(searchTerm, 300);

// Detect clicks outside element
const ref = useClickOutside(() => closeModal());

// Responsive design
const isMobile = useMediaQuery("(max-width: 768px)");

🔧 TypeScript Support

Full TypeScript support with autocomplete:

import { CustomButtonProps } from "rankmonky-ui";

// Your IDE will show all available props
const MyButton: React.FC<CustomButtonProps> = (props) => {
  return <CustomButton {...props} />;
};

💡 Examples

Simple Contact Form

import { CustomInput, CustomTextArea, CustomButton } from "rankmonky-ui";
import "rankmonky-ui/styles";

function ContactForm() {
  return (
    <form>
      <CustomInput label="Name" placeholder="Your name" required />

      <CustomInput
        label="Email"
        type="email"
        placeholder="[email protected]"
        required
      />

      <CustomTextArea label="Message" placeholder="Your message..." rows={4} />

      <CustomButton variant="primary" type="submit">
        Send Message 📧
      </CustomButton>
    </form>
  );
}

Media Gallery

import { CustomImageRenderer, CustomVideoRenderer } from "rankmonky-ui";

function MediaGallery() {
  return (
    <div>
      <CustomImageRenderer
        src="/photo1.jpg"
        alt="Beautiful sunset"
        width="300px"
      />

      <CustomVideoRenderer src="/video1.mp4" title="My Travel Video" controls />
    </div>
  );
}

🆘 Need Help?

Common Questions

Q: How do I change button colors?

:root {
  --color-primary: #your-color;
}

Q: How to make components responsive?

import { useMediaQuery } from "rankmonky-ui";

const isMobile = useMediaQuery("(max-width: 768px)");
return (
  <CustomButton size={isMobile ? "small" : "large"}>
    Responsive Button
  </CustomButton>
);

Q: How to handle form validation?

<CustomInput
  label="Email"
  type="email"
  required
  pattern="[^@]+@[^@]+\.[^@]+"
  errorMessage="Please enter a valid email"
/>

Getting Support

• 📖 Documentation: Check component props in your IDE
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

📦 Package Info

• Size: Tree-shakeable (import only what you use)
• Dependencies: Minimal peer dependencies (just React)
• Browser Support: Modern browsers (ES2020+)
• React Version: 16.8+ (hooks support)

🚀 What's New

Check our Changelog for latest updates.

📄 License

MIT © RankMonky Team

    🎨 Happy Coding! 🎨

    ╔══════════════════════════════════╗
    ║  Made with ❤️ by RankMonky Team  ║
    ║                                  ║
    ║  🌟 Star us on GitHub!          ║
    ║  🐛 Report issues               ║
    ║  🤝 Contribute                  ║
    ╚══════════════════════════════════╝