# rc-spotlight

> It is wrapper to give spotlight to component.

Latest version **3.0.0** (published 2020-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-spotlight
pnpm add rc-spotlight
yarn add rc-spotlight
bun add rc-spotlight
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2020-05-09 |
| First published | 2019-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 59.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | kerematam |
| Maintainers | kerematam |
| Keywords | spotlight, react, highlight, backdrop, overlay, training, showcase |

## Links

- npm: https://www.npmjs.com/package/rc-spotlight
- Repository: https://github.com/kerematam/rc-spotlight
- Homepage: https://github.com/kerematam/rc-spotlight#readme
- Issues: https://github.com/kerematam/rc-spotlight/issues
- npm.io page: https://npm.io/package/rc-spotlight

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2020-05-09
- 2.0.3 — 2020-05-09
- 2.0.2 — 2020-05-02
- 2.0.0 — 2020-04-20
- 1.0.0 — 2019-12-28

## README

# rc-spotlight

> Spotlight component simply highlights the component(s) that it wraps.

[![NPM](https://img.shields.io/npm/v/rc-spotlight.svg)](https://www.npmjs.com/package/rc-spotlight)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

# Install

```bash
npm install --save rc-spotlight
```

# Demo 

[![Edit react-counter-input](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-spotlight-example-zsi2j)

![Image description](docs/images/showcase.gif)

# Usage

```jsx
import React, { Component } from "react";
import Spotlight from "rc-spotlight";

class Example extends Component {
  render() {
    return (
      <Spotlight isActive label={<h1>This is backdrop view</h1>}>
        <div>Content with Spotlight Effect</div>
      </Spotlight>
    );
  }
}
```

## Usage with LabelWrapper

```jsx
import React from "react";
import Spotlight, { LabelWrapper } from "rc-spotlight";

const BackdropText = text => (
  <LabelWrapper center>
    <div>{text}</div>
  </LabelWrapper>
);

const App = () => (
  <Spotlight isActive label={BackdropText("This is title")}>
    <h1>Spotlight</h1>
  </Spotlight>
);
```

## Usage with Antd Tooltip

![Image description](docs/images/showcase_antd.gif)

Create Wrapper for Spotlight with Tooltip :

```jsx
const SpotlightWithTooltip = ({
  isActive,
  toolTipPlacement = "top",
  toolTipTitle = "Check here!",
  children,
  ...rest
}) => {
  return (
    <Tooltip
      placement={toolTipPlacement}
      visible={isActive}
      title={toolTipTitle}
    >
      <Spotlight isActive={isActive} {...rest}>
        {children}
      </Spotlight>
    </Tooltip>
  );
};
```

And use it :

```jsx
const App = () => (
  <SpotlightWithTooltip
    isActive
    toolTipPlacement="right"
    toolTipTitle={"You can use Antd Tooltip"}
    style={{
      width: "fit-content",
      boxShadow: "0 0 0 5px #ffffff"
    }}
  >
    <Title>Spotlight</Title>
  </SpotlightWithTooltip>
);
```

## Spotlight API

<table>
  <thead>
    <tr>
      <th>Property</th>
      <th>Description</th>
      <th>Type</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>isActive</td>
      <td>Whether the component is enabled or disabled.</td>
      <td>Boolean</td>
      <td>false</td>
    </tr>
    <tr>
      <td>children</td>
      <td>Component(s) to have spotlight effect.</td>
      <td>Node(s)</td>
      <td>null</td>
    </tr>
    <tr>
      <td>label</td>
      <td>Component(s) to be rendered over backdrop.</td>
      <td>Node(s)</td>
      <td>null</td>
    </tr>
    <tr>
      <td>zIndex</td>
      <td>Z index of backdrop and wrapped component.</td>
      <td>Number or String</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>backdropColor</td>
      <td>Color of backdrop.</td>
      <td>String</td>
      <td>#000000</td>
    </tr>
    <tr>
      <td>backdropOpacity</td>
      <td>Opacity of backdrop.</td>
      <td>Number</td>
      <td>0.8</td>
    </tr>
    <tr>
      <td>inheritParentBackgroundColor</td>
      <td>Recursively search for parent background color in case you don't want your component to inherit color of
        backdrop. This prop prevent transparent component to inherit backdrop color.</td>
      <td>Boolean</td>
      <td>true</td>
    </tr>
    <tr>
      <td>enableShadow</td>
      <td>Gives shadow around wrapped component .</td>
      <td>Boolean</td>
      <td>false</td>
    </tr>
    <tr>
      <td>style</td>
      <td>Inline style for wrapped component when spotlight is actived</td>
      <td>Object</td>
      <td>null</td>
    </tr>
  </tbody>
</table>

## LabelWrapper API

<table>
  <thead>
    <tr >
      <th>Property</th>
      <th>Description</th>
      <th>Type</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>children</td>
      <td>Component(s) to have spotlight effect.</td>
      <td>Node(s)</td>
      <td>null</td>
    </tr>
    <tr>
      <td>zIndex</td>
      <td>Z index of backdrop and wrapped component.</td>
      <td>Number or String</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>center</td>
      <td>Centers label</td>
      <td>Boolean</td>
      <td>false</td>
    </tr>
    <tr>
      <td>style</td>
      <td>Inline style for label</td>
      <td>Object</td>
      <td>null</td>
    </tr>
  </tbody>
</table>

## License

MIT © [kerematam](https://github.com/kerematam)

---
_Source: https://npm.io/package/rc-spotlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._