# @edvnz/blurwidget

> A React Native component that applies a customizable blur effect to its content. Supports both native and web platforms, and allows users to specify the blur radius and background color.

Latest version **1.0.2** (published 2023-01-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install @edvnz/blurwidget
pnpm add @edvnz/blurwidget
yarn add @edvnz/blurwidget
bun add @edvnz/blurwidget
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-01-08 |
| First published | 2022-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jeyabaskar, nithishkumar, gmvarun, karunaelsajohn, yokesh_ks |
| Keywords | blur, blur effect, blur view, react native, edvnz, edvanza, react native community |

## Links

- npm: https://www.npmjs.com/package/@edvnz/blurwidget
- npm.io page: https://npm.io/package/@edvnz/blurwidget

## Dependencies (1)

- [@react-native-community/blur](https://npm.io/package/@react-native-community/blur.md) ^3.6.0

## Recent versions

- 1.0.2 (latest) — 2023-01-08
- 1.0.1 — 2023-01-08
- 1.0.0 — 2022-09-27

## README

## BlurWidget

A React Native component that applies a customizable blur effect to its content. Supports both native and web platforms, and allows users to specify the blur radius and background color.

## Installation

To install this package, run the following command:

```
$ npm install @edvnz/blurwidget
# or
$ yarn add @edvnz/blurwidget
```

## Features

- Customizable blur radius: allow users to specify the blur radius for the effect.
- Multiple blur variants: provide multiple blur variants to choose from, such as light, medium, and strong.
- Customizable background color: allow users to specify a custom background color for the component.
- Support for web: make the component work on the web as well as native platforms.
- Responsive design: make the component automatically adjust its size and layout based on the size of the screen or container.

## Props

| Prop name              | Type       | Description                                                       |
| :--------------------- | :--------- | :---------------------------------------------------------------- |
| `variant`              | `string`   | the variant of the blur effect. Can be either "blur80" or "blur8" |
| `onPress`              | `function` | a callback function that is called when the component is pressed. |
| `disabled`             | `boolean`  | a flag that indicates whether the component is disabled           |
| `backgroundColorStyle` | `string`   | the background color of the component.                            |

## Usage

```
import React from "react";
import BlurWidget from '@edvnz/blurwidget'

<BlurWidget variant="blur80" onPress={handlePress} />
```

---
_Source: https://npm.io/package/@edvnz/blurwidget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._