React Divider

A lightweight, customizable divider component for React applications that supports both horizontal and vertical orientations.

Features

• 📏 Customizable weight
• 🎨 Customizable color
• ↔️ Support for both horizontal and vertical orientations
• 🎯 TypeScript support
• 🚀 Lightweight and dependency-free (except React)
• 🎨 Customizable with classNames

Installation

# Using npm
npm install @operezol/react-divider

# Using yarn
yarn add @operezol/react-divider

# Using pnpm
pnpm add @operezol/react-divider

Usage

import React from 'react';
import Divider from '@operezol/react-divider';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Divider />
      <p>Content separated by a divider</p>
      
      {/* Custom divider */}
      <Divider 
        weight={2}
        color="#ff0000"
        orientation="horizontal"
      />
      
      <div style={{ display: 'flex', height: '200px' }}>
        <p>Left content</p>
        <Divider orientation="vertical" />
        <p>Right content</p>
      </div>
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | weight | number | 1 | Thickness of the divider line in pixels | | color | string | '#e0e0e0' | Color of the divider. Can be any valid CSS color value. | | orientation | 'horizontal' \| 'vertical' | 'horizontal' | Orientation of the divider. | | className | string | '' | Additional CSS class name. |

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build for production:

   npm run build

Contributing

Contributions are welcome! Please feel free to submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Oriol Pérez Olivares