react-ios-liquid-glass/readme.md

react-ios-liquid-glass is a lightweight React + TypeScript library that helps you easily replicate the elegant iOS liquid glass effect (also known as glassmorphism). With built‑in support for blur, transparency, and smooth transitions, this package allows

# React Liquid Glass Component

A lightweight React component that applies a liquid glass effect to its children, providing a frosted glass aesthetic with customizable properties.

## Installation

You can install the `react-liquid-glass` package using one of the following package managers:

### npm
```bash
npm install react-ios-liquid-glass
```

### Yarn
```bash
yarn add react-ios-liquid-glass
```

### pnpm
```bash
pnpm add react-ios-liquid-glass
```

## Usage

Import the `LiquidGlass` component and its CSS file, then wrap your content with the component.

```jsx
import "react-ios-liquid-glass/dist/index.css";
import { LiquidGlass } from "react-ios-liquid-glass";

function App() {
  return (
    <LiquidGlass>
      <div>Your content here</div>
    </LiquidGlass>
  );
}
```

## Props

The `LiquidGlass` component accepts the following props:

| Prop           | Type                | Description                                                                 | Default Value |
|----------------|---------------------|-----------------------------------------------------------------------------|---------------|
| `children`     | `React.ReactNode`   | The content to be wrapped with the liquid glass effect.                     | **Required**  |
| `width`        | `string`            | Sets the width of the component.                                            | `"auto"`      |
| `height`       | `string`            | Sets the height of the component.                                           | `"auto"`      |
| `borderRadius` | `string`            | Defines the border radius of the liquid glass effect.                        | `"20px"`      |
| `blur`         | `string`            | Controls the blur intensity of the glass effect.                            | `"10px"`      |
| `brightness`   | `string`            | Adjusts the brightness of the glass effect.                                 | `"1.1"`       |
| `padding`      | `string`            | Sets the padding inside the component.                                      | `"10px"`      |
| `style`        | `React.CSSProperties` | Additional CSS styles to apply to the component.                          | `undefined`   |

### Prop Details

- **`children`**: The content you want to apply the liquid glass effect to. This is a required prop.
- **`width`** and **`height`**: Define the dimensions of the component. Accepts any valid CSS length unit (e.g., `"100px"`, `"50%"`, `"auto"`).
- **`borderRadius`**: Controls the corner radius of the glass effect. Accepts valid CSS border-radius values (e.g., `"10px"`, `"50%"`).
- **`blur`**: Sets the blur effect intensity. Higher values create a more frosted appearance (e.g., `"5px"`, `"20px"`).
- **`brightness`**: Adjusts the brightness of the effect. Values greater than `1` increase brightness, while values less than `1` decrease it (e.g., `"1.2"`, `"0.8"`).
- **`padding`**: Adds inner spacing around the children. Accepts valid CSS padding values (e.g., `"15px"`, `"1rem"`).
- **`style`**: Allows custom CSS properties to be applied to the component, overriding default styles where applicable.

## Example

```jsx
import "react-ios-liquid-glass/dist/index.css";
import { LiquidGlass } from "react-ios-liquid-glass";

function App() {
  return (
    <LiquidGlass
      width="300px"
      height="200px"
      borderRadius="15px"
      blur="12px"
      brightness="1.3"
      padding="20px"
    >
      <h1>Hello, Liquid Glass!</h1>
      <p>This is a frosted glass effect.</p>
    </LiquidGlass>
  );
}
```

## Notes

- Ensure the CSS file (`react-ios-liquid-glass/dist/index.css`) is imported to apply the liquid glass styling.
- The component inherits all standard HTML `div` attributes, as it extends `React.HTMLAttributes<HTMLDivElement>`.
- For optimal visual results, use a semi-transparent background or place the component over a visually rich background to enhance the frosted glass effect.

## License

This project is licensed under the MIT License.