leumas-react-flashlights

React FlashLight Component

A React component that creates a flashlight effect on the entire screen. The screen goes dark, and only the area around the cursor is illuminated, allowing you to highlight parts of your content as you hover over them.

Installation

Install the package via npm:

npm install leumas-react-flashlights

Usage

To use the FlashLight component, wrap your content with it. Here's an example:

FlashLight Component (FlashLight.jsx)

import React from 'react';
import FlashLight from 'react-flashlight-effect';

const App = () => {
  return (
    <FlashLight>
      <div>
        <h1>Hello, world!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
      </div>
    </FlashLight>
  );
};

export default App;

Styling

Include the following CSS to achieve the flashlight effect:

CSS (FlashLight.css)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  cursor: none;
}

.flashlight-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.flashlight-content {
  font-size: 1em;
  text-align: justify;
  line-height: 1.8em;
  padding: 0.2em;
}

#flashlight {
  --Xpos: 50vw;
  --Ypos: 50vh;
}

#flashlight:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  background: radial-gradient(
    circle 9em at var(--Xpos) var(--Ypos),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
}

@media screen and (max-width: 500px) {
  .flashlight-content {
    font-size: 14px;
  }
}

Additional Notes

• Z-index Layering Issues: Since the flashlight effect relies on overlaying a dark layer on top of your content, you may encounter issues with z-index layers. Ensure that the FlashLight component and its styles are applied correctly and have a high enough z-index to function properly. Adjust the z-index values as necessary in your styles to avoid conflicts with other components.

• Cursor Styling: The CSS provided sets cursor: none; to hide the cursor. This enhances the flashlight effect by making the light spot the only indicator of the cursor's position. If you need to display the cursor for any reason, you can adjust or remove this line in the CSS.

• Touch Device Support: The component includes support for touch devices. It will track the touch position and update the flashlight effect accordingly.

For more detailed usage and examples, please refer to the documentation.