borderly v1.0.4

Borderly

A lightweight React component that helps you visualize and debug your layout by adding outlines to all elements on your page with a single click.

Features

• 🎯 One-click element outline visualization
• 🎨 Customizable outline color
• 🧹 Auto-cleanup on component unmount
• 📱 Responsive floating button
• 🔄 Toggle functionality
• 🎭 Built-in TypeScript support

Installation

npm install borderly
# or
yarn add borderly
# or
pnpm add borderly

Usage

1. Import the Borderly component:

import Borderly from 'borderly';

2. Add it to your React application:

function App() {
  return (
    <div>
      <Borderly />
      {/* Your other components */}
    </div>
  );
}

Customizing the outline color

You can customize the outline color by passing the outlineColor prop:

<Borderly outlineColor="#ff0000" />

Props

How It Works

Borderly adds a floating button to your application that, when clicked, dynamically injects a style element into your document's head. This style element adds a 1px solid outline to all elements on the page, making it easy to visualize your layout structure.

The outline can be toggled on and off with the button, and the style element is automatically cleaned up when the component unmounts.

Requirements

• React 16.8+ (Hooks support)
• TypeScript (optional but supported)

Styling

Borderly uses Tailwind CSS classes for styling the toggle button. If you're not using Tailwind in your project, make sure to include the necessary styles or override them using your own CSS.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Abhay Chauhan

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.