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} />