React Glassy

The withLiquid higher-order component (HOC) provides an alternative way to apply glass effects to your components. It's useful when you want to permanently attach a glass effect to a specific component.

Basic Usage

Wrap your component with withLiquid:

import { withLiquid } from "react-glassy";
import "react-glassy/styles.css";

function ProfileCard({ name, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
    </div>
  );
}

export const GlassProfileCard = withLiquid(ProfileCard, {
  preset: "frost",
  config: { borderRadius: "16px" },
});

Regular Component

With Glass HOC

Passing Configuration

You can pass glass configuration when creating the HOC:

import { withLiquid } from "react-glassy";

const GlassButton = withLiquid(Button, {
  preset: "edge",
  config: {
    blur: "8px",
    specular: false,
  },
});

Complete Example

import { withLiquid } from "react-glassy";
import "react-glassy/styles.css";

interface CardProps {
  title: string;
  description: string;
  className?: string;
}

function Card({ title, description, className }: CardProps) {
  return (
    <div className={className}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

export const GlassCard = withLiquid(Card, {
  preset: "frost",
  config: {
    borderRadius: "24px",
  },
});

function App() {
  return (
    <GlassCard
      title="Glass Card"
      description="This card always has a glass effect"
    />
  );
}

Glass Card

This card always has a glass effect applied via HOC

HOC withLiquid