React-spotlight-clickable NPM

React Spotlight

This component covers the page with an overlay, only showing around coordinates that you choose. You can change the coordinates and the circle will animate to the new ones. This could be used to dynamically introduce parts of a website to the user, or create more complex interactive experiences.

Usage

Live demo: https://www.matislepik.com/react-spotlight/

Source code can be found in the example/src/Demo.js.

Installation

You can install the component through NPM:

yarn add react-spotlight-clickable or npm install react-spotlight-clickable --save

Then import it in your code:

import Spotlight from 'react-spotlight-clickable';

Basic example:

Renders a spotlight at x: 350px y: 25px

// At top of file
import Spotlight from 'react-spotlight';

// In render method
<Spotlight x={350} y={25} />

Example with all props:

Renders a spotlight at x: 50% y: 25%. You can add text content inside the circle, but you'll have to style it yourself.

<Spotlight
  x={50}
  y={25}
  color="#d74793"
  radius={100}
  responsive
  usePercentage
  animSpeed={1000}
  borderColor="#ddd"
  borderWidth={5}>
  <div style={{
    position: 'absolute',
    left: '50%',
    top: '-50px',
    transform: 'translate(-50%, -100%)',
    whiteSpace: 'nowrap'
  }}>
    <h1>Text content</h1>
  </div>
</Spotlight>

If you want to make whatever is behind the spotlight circle clickable just set zIndex to 0:

e.x.

<Spotlight
  x={50}
  y={25}
  color="#d74793"
  radius={100}
  responsive
  usePercentage
  animSpeed={1000}
  borderColor="#ddd"
  borderWidth={5}
  zIndex={o}>

</Spotlight>

Animating

You can change the x / y / color / borderColor variables dynamically and the spotlight will animate to the new size / position / colors. Radius can also be animated, but this is laggy because it changes the CSS width/height values.

PropTypes

PropType (type) = default	Description
x (number) = 50	Center of the circle. Pixels or percentage, depending on `usePercentage` value
y (number) = 50	Center of the circle. Pixels or percentage, depending on `usePercentage` value
radius (number) = 100	Radius of the circle. Avoid changing this dynamically because css transitions on width/height are laggy.
color (string) = 'black'	Color of the overlay
usePercentage (boolean) = false	By default, the coordinates are interpreted as pixels. This causes them to be interpreted as percentage of the viewport.
animSpeed (number) = 500	Transition speed when changing coordinates. You can control this manually with CSS if you want - but be sure to change it for both the outer and inner container.
borderColor (string) = 'white'	Color of the circle's border
borderWidth (number) = 0	Width of the circle's border
responsive (boolean) = true	Certain values depend on cached viewport size for performance, so we listen to a (throttled) resize event to recalculate values. Turning this off might result in buggy behaviour if the screen is resized.
outerClass	Class name for the outer container
innerClass	Class name for the inner container
children	You can render children into the inner container, but you will have to position them yourself.
zIndex (number) = 999	zIndex of the spotlight circle. If changed whatever is behind it will be clickable. In other words, it will render in front of the spotligth.

Development

The example directory doubles as a place to test out changes to the component. It is created using create-react-app. To use it:

npm run build
cd example
yarn start

Notes

This component works with server rendering, however there will be an invalid checksum error.
This is inspired by Ahmad Moussawi's Hop library for jQuery.

prop-types

@everything-registry/sub-chunk-2614

1.0.5

7 years ago

1.0.4

7 years ago