Leptos Color

Leptos Color is a simple crate that provides a color picker component for Leptos, a Rust web framework. It allows easy integration of color selection functionality in Leptos applications.

Features

• Color Picker: A customizable color picker component.
• Color Input: An input field with an attached color picker.
• Theme Support: Customizable theming options.
• Flexible Configuration: Options to hide specific color input types (alpha, hex, RGB).

Installation

Add the following to your Cargo.toml:

[dependencies]
leptos_color = "0.6.14"

Usage

Basic Color Picker

use leptos::*;
use leptos_color::{components::color_picker::ColorPicker, Color};

#[component]
fn App() -> impl IntoView {
    let (color, set_color) = create_signal(Color::new(1.0, 1.0, 1.0, 1.0));

    view! {
        <ColorPicker
            color=color
            on_change=move |new_color| set_color.set(new_color)
        />
    }
}

Color Input

use leptos::*;
use leptos_color::{components::color_input::ColorInput, Color};

#[component]
fn App() -> impl IntoView {
    let color = create_rw_signal(Color::new(1.0, 1.0, 1.0, 1.0));

    view! {
        <ColorInput
            color=color
            on_change=move |new_color| color.set(new_color)
        />
    }
}

Configuration Options

• theme: Customize the appearance of the color picker.
• hide_alpha: Hide the alpha (opacity) input.
• hide_hex: Hide the hexadecimal color input.
• hide_rgb: Hide the RGB color inputs.

Examples

Check the examples/basic-ssr directory for a complete example of how to use Leptos Color in a server-side rendered application.

Feature Flags

• default: Includes the color_input feature.
• csr: Client-side rendering support.
• ssr: Server-side rendering support.
• hydrate: Hydration support.
• color_input: Enables the ColorInput component.

Documentation

For more detailed information, check out the API documentation.

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.