Edit Component

🧬 Pride RS Dioxus Usage

Adding Pride RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the pride-rs library to your dependencies by including it in your Cargo.toml file:

   # Halal edition (default)
   cargo add pride-rs --features=dio
   
   # Full edition (includes gender-identity flags)
   cargo add pride-rs --features=dio,haram
   

3. Import the Flag component into your Dioxus application.

🚩 Feature Gate: haram

By default, four flag types are excluded from the crate at compile time because they relate to gender identity change:

Enable the haram feature to opt-in:

pride-rs = { version = "0.1.0", features = ["dio", "haram"] }

You can also inspect the gate at runtime via FlagConfig::haram:

use pride_rs::Type;
use pride_rs::FlagLookup;

let config = Type::Rainbow.config().unwrap();
assert!(!config.haram);

// Only available when --features haram is set:
// let config = Type::Transgender.config().unwrap();
// assert!(config.haram);

And detect haram variants directly on the enum (requires haram feature):

#[cfg(feature = "haram")]
{
    use pride_rs::Type;
    assert!(Type::Transgender.is_haram());
    assert!(!Type::Rainbow.is_haram());
}

🛠️ Usage

Each flag type is backed by a configuration that returns a list of colors (stripes) and a direction (horizontal or vertical). The component renders a <div> with child <div> stripes, each styled with the color and arranged by direction:

Flag container div (flex layout)
+-------------------------------------------------+
|                                                 |
|  Horizontal direction (flex-direction: column)  |
|  +-------+                                      |
|  | Color |                                      |
|  | Stripe|                                      |
|  +-------+                                      |
|  | Color |                                      |
|  | Stripe|                                      |
|  +-------+                                      |
|  | Color |                                      |
|  | Stripe|                                      |
|  +-------+                                      |
|                                                 |
|                                                 |
|  Vertical direction (flex-direction: row)       |
|  +-------+-------+-------+-------+-------+      |
|  | Color | Color | Color | Color | Color |      |
|  | Stripe| Stripe| Stripe| Stripe| Stripe|      |
|  +-------+-------+-------+-------+-------+      |
|                                                 |
+-------------------------------------------------+

The Direction enum guides the layout style:

• Horizontal: flex-direction: column;
• Vertical“ flex-direction: row;

use dioxus::prelude::*;
use pride_rs::{Size, Type};
use pride_rs::dioxus::{Flag, FlagSection};

#[component]
pub fn App() -> Element {
    rsx! {
        Flag {
            r#type: Type::Bisexual,
        }
        Flag {
            size: Size::Large,
        }
        FlagSection {
            title: "Pride Flags".to_string(),
            flags: vec![
                Type::Rainbow,
                Type::Bisexual,
                Type::Lesbian,
            ],
            id: "pride"
        }
    }
}

🔧 Props

Flag

The Flag component renders a single flag based on the provided Type, with optional sizing, ARIA accessibility labels, hover tooltips, and customizable styles.

FlagProps

FlagSection

The FlagSection component displays a titled section of multiple flags. It can be used to group flags by type.

FlagSectionProps

💡 Notes

• Use FlagSection for grouping related flags with semantic markup and accessible labels.
• Use Flag alone for isolated flags.
• Customize styles by overriding style, class, or size props.
• Supports keyboard navigation and tooltips for improved accessibility.
• Each Flag renders with role="img" and a descriptive aria-label.
• Focusable via tabindex=0.
• Keyboard operable (Enter and Space log selection).
• Tooltip linked with aria-describedby for screen readers.
• Flags have aria-roledescription="flag" for better assistive context.
• FlagSection uses role="group" with aria-labelledby and aria-describedby.
• Empty state has polite aria-live announcements.
• Gender-identity flag types are excluded by default; enable --features haram to include them.

Usage

CLI Usage

You can import Pride RS directly into your project to customize and modify it using the opensass cli:

os add pride-rs dio

TODO