v1.0.0

• ✨ Add normalizeColor utility and support multiple formats for defaultColor prop
• ✨ Add support for cursor text color customization

Migration Guide

From v0.2.4 to v1.0.0

Breaking Changes

🎨 CSS Variable Format Changes

The CSS variable format for cursor colors has been updated to use complete CSS color values instead of raw color components.

Before (v0.2.4):

:root {
  --cursor-color: 349, 80%, 59%; /* Raw HSL components */
}

After (v1.0.0):

:root {
  --cursor-color: hsl(349, 80%, 59%); /* Complete HSL color */
}

New Features

✨ Enhanced Color Support

The defaultColor prop now supports multiple color formats:

// All these formats are now supported:
<Cursor defaultColor="red" />
<Cursor defaultColor="#ff0000" />
<Cursor defaultColor="rgb(255, 0, 0)" />
<Cursor defaultColor="hsl(0, 100%, 50%)" />
<Cursor defaultColor="oklch(0.6 0.3 0)" />

✨ Text Color Customization

You can now customize the cursor text color using the new --cursor-text-color CSS variable:

:root {
  --cursor-color: hsl(349, 80%, 59%);
  --cursor-text-color: white; /* New text color customization */
}

✨ Improved Dark Mode Support

The cursor now automatically detects system dark mode preferences:

/* Light mode */
:root {
  --cursor-color: hsl(240, 10%, 3.9%);
  --cursor-text-color: hsl(0, 0%, 98%);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --cursor-color: hsl(0, 0%, 98%);
    --cursor-text-color: hsl(240, 10%, 3.9%);
  }
}

Migration Steps

Step 1: Update CSS Variables

Find all instances of --cursor-color in your stylesheets and update the format:

Search for:

--cursor-color: 349, 80%, 59%;

Replace with:

--cursor-color: hsl(349, 80%, 59%);

Step 2: Update Package Version

Update your package.json:

npm install react-dot-cursor@^1.0.0
# or
pnpm add react-dot-cursor@^1.0.0
# or
yarn add react-dot-cursor@^1.0.0

Step 3: Review Color Configurations

Take advantage of the new color format support by using any valid CSS color format:

/* Before - limited to HSL components */
--cursor-color: 349, 80%, 59%;

/* After - any valid CSS color */
--cursor-color: hsl(349, 80%, 59%);
/* or */
--cursor-color: #e11d48;
/* or */
--cursor-color: rgb(225, 29, 72);

Step 4: Optional - Add Text Color Customization

If you want to customize the cursor text color, add the new CSS variable:

:root {
  --cursor-color: hsl(349, 80%, 59%);
  --cursor-text-color: white; /* Add this for text color */
}

Quick Migration Script

You can use this regex to quickly find and replace color values in your CSS files:

Find: --cursor-color:\s*(\d+),\s*(\d+%),\s*(\d+%);

Replace: --cursor-color: hsl($1, $2, $3);

Compatibility

• ✅ React 18.3.1 or higher
• ✅ Modern browsers supporting CSS custom properties
• ✅ TypeScript 5.6+ (if using TypeScript)

Need Help?

If you encounter any issues during migration:

1. Check the documentation for examples
2. Open an issue on GitHub
3. Review the styling guide for color configuration

---

Note: This is a major version update with breaking changes. Please test thoroughly in your development environment before deploying to production.

v0.2.4

• ⬆️ Upgrade dependencies

v0.2.3

• ✨ Add scaleOnClick prop

v0.2.2

• ✨ Allow multiple selectors

v0.2.1

• 🎨 Move isText in utils
• 📝 Update package description

v0.2.0

• ✨ Add theme and content

v0.1.3

• ✨ Add missing interactive/text elements
• 📱 Add mobile detection to disable cursor
• 🔄 Prioritize interactive elements

v0.1.2

• 🚸 Improve cursor position
• 🔥 Remove unnecessary file/code

v0.1.1

• ✨ Add missing text elements