<commit_before># 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 onew 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`.

### Example (pixel coordinates):

```
<Spotlight x={550} y={325} />
```

### Example (percentage):

```
<Spotlight
  x={50}
  y={25}
  color="#d74793"
  radius={100}
  responsive
  usePercentage
  animSpeed={1000}
  borderColor="#ddd"
  borderWidth={5} /><commit_msg>Add installation instructions<commit_after># 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 onew 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` or `npm install react-spotlight --save`

Then import it in your code:

`import Spotlight from 'react-spotlight';`

### Example (pixel coordinates):

```
<Spotlight x={550} y={325} />
```

### Example (percentage):

```
<Spotlight
  x={50}
  y={25}
  color="#d74793"
  radius={100}
  responsive
  usePercentage
  animSpeed={1000}
  borderColor="#ddd"
  borderWidth={5} />
{'fraction_non_alphanumeric': 0.10997596153846154, 'fraction_numerical': 0.027644230769230768, 'mean_word_length': 4.513245033112582, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6011461', 'n_tokens_mistral': 535, 'n_tokens_neox': 484, 'n_words': 192}