react-ambient-light
v0.0.1TypeScript
A React component that creates beautiful ambient light effects for images and videos with customizable glow, blur, and animations
0/weekUpdated 2 months agoMITUnpacked: 41.0 KB
Published by Aokaze
npm install react-ambient-light
A React component that creates beautiful ambient light effects for images and videos with customizable glow, blur, and scale options.
Installation
``bash`
npm install react-ambient-light
`bash`
pnpm add react-ambient-light
`bash`
yarn add react-ambient-light
Features
- Ambient light effect for images and videos
- Customizable blur, scale, and opacity
- Video synchronization support
- TypeScript support with full type definitions
- Lightweight and performant
- SSR compatible
- Accessibility features built-in
Usage
$3
`tsx
import { AmbientLight } from 'react-ambient-light';
function App() {
return (
type="image"
blur={40}
scale={1.1}
opacity={0.6}
/>
);
}
`
$3
`tsx
import { AmbientLight } from 'react-ambient-light';
function App() {
return (
type="video"
videoAutoPlay={true}
videoLoop={true}
videoMuted={true}
/>
);
}
`
$3
`tsx
import { AmbientLight } from 'react-ambient-light';
function App() {
return (
type="video"
blur={50}
scale={1.2}
opacity={0.7}
className="my-ambient-light"
style={{ borderRadius: '16px' }}
>
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '2rem',
}}
>
Overlay Content
);
}
`
$3
Extract the dominant color from an image:
tsx
import { useDominantColor } from 'react-ambient-light';function ColorDisplay() {
const color = useDominantColor('https://example.com/image.jpg');
return
Dominant color: {color};
}
`API Reference
$3
#### Props
| Prop | Type | Default | Description |
| ----------- | -------------------- | ------------ | -------------------------------------- |
|
| string | required | URL of the image or video |
| type | 'image' \| 'video' | 'image' | Type of content |
| blur | number | 40 | Blur intensity of the glow (in pixels) |
| scale | number | 1.1 | Scale factor for the glow expansion |
| opacity | number | 0.6 | Opacity of the glow (0 to 1) |
| className | string | '' | Custom CSS class for the container |
| style | CSSProperties | {} | Custom inline styles for the container |
| children | ReactNode | undefined | Optional content to overlay on top |
| alt | string | 'Content' | Alternative text for the image |
| onLoad | () => void | undefined | Callback when the image/video loads |
| onError | () => void | undefined | Callback when there's an error loading |#### Video-specific Props
| Prop | Type | Default | Description |
| --------------- | --------- | ------------------------------ | -------------------------- |
|
videoAutoPlay | boolean | true | Enable autoplay for videos |
| videoControls | boolean | false | Show video controls |
| videoLoop | boolean | true | Loop the video |
| videoMuted | boolean | true (when autoPlay is true) | Mute the video |$3
Extract the dominant color from an image.
`tsx
const color = useDominantColor(imageSrc: string): string
`Parameters:
-
(string): URL of the imageReturns:
-
string: RGB color value (e.g., 'rgb(255, 128, 64)')Examples
$3
`tsx
blur={60}
opacity={0.8}
style={{
maxWidth: '600px',
margin: '0 auto',
borderRadius: '20px',
}}
alt="Beautiful landscape"
/>
`$3
tsx
type="video"
videoControls={true}
videoAutoPlay={false}
videoMuted={false}
blur={30}
scale={1.15}
/>
`$3
tsx
Artwork Title
Artist Name
`$3
tsx
onLoad={() => console.log('Image loaded successfully')}
onError={() => console.error('Failed to load image')}
/>
`Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
TypeScript
This package is written in TypeScript and includes type definitions out of the box.
tsx
import type { AmbientLightProps } from 'react-ambient-light';const props: AmbientLightProps = {
src: 'image.jpg',
type: 'image',
blur: 40,
};
`Performance Considerations
- The component uses
to prevent unnecessary re-renders
- Images use lazy loading by default
- Videos are synchronized efficiently using refs
- The glow layer has pointer-events: none to avoid interfering with interactionsAccessibility
- Images include proper
alt attributes
- Glow layers are hidden from screen readers with aria-hidden="true"
- Videos include for mobile compatibility
- Decorative glow videos have tabIndex={-1}` to prevent focusContributing
Contributions are always welcome!
Please follow our contributing guidelines.
Please adhere to this project's CODE_OF_CONDUCT.
Issues
Report issues at Issues.
License
Licensed under the MIT License.
See LICENSE for more information.