https://github.com/kerematam/rc-spotlight

It's a component to highlight wrapped component(s) by filling background with backdrop layer.
https://github.com/kerematam/rc-spotlight

backdrop highlight reactjs spotlight

Last synced: 7 months ago
JSON representation

It's a component to highlight wrapped component(s) by filling background with backdrop layer.

• Host: GitHub
• URL: https://github.com/kerematam/rc-spotlight
• Owner: kerematam
• Created: 2019-12-22T16:27:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T01:42:50.000Z (over 1 year ago)
• Last Synced: 2025-03-18T12:58:19.591Z (7 months ago)
• Topics: backdrop, highlight, reactjs, spotlight
• Language: JavaScript
• Homepage:
• Size: 760 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 (

      This is backdrop view}>

        
Content with Spotlight Effect

      

    );

  }

}

```


## Usage with LabelWrapper

```jsx

import React from "react";

import Spotlight, { LabelWrapper } from "rc-spotlight";

const BackdropText = text => (

  

    
{text}

  

);


const App = () => (

  

    
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 (

    

      

        {children}

      

    

  );

};

```

And use it :

```jsx

const App = () => (

  

    Spotlight

  

);

```

## Spotlight API

  

    

      Property

      Description

      Type

      Default

    

  

  

    

      isActive

      Whether the component is enabled or disabled.

      Boolean

      false

    

    

      children

      Component(s) to have spotlight effect.

      Node(s)

      null

    

    

      label

      Component(s) to be rendered over backdrop.

      Node(s)

      null

    

    

      zIndex

      Z index of backdrop and wrapped component.

      Number or String

      1000

    

    

      backdropColor

      Color of backdrop.

      String

      #000000

    

    

      backdropOpacity

      Opacity of backdrop.

      Number

      0.8

    

    

      inheritParentBackgroundColor

      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.

      Boolean

      true

    

    

      enableShadow

      Gives shadow around wrapped component .

      Boolean

      false

    

    

      style

      Inline style for wrapped component when spotlight is actived

      Object

      null

    

  

## LabelWrapper API

  

    

      Property

      Description

      Type

      Default

    

  

  

    

      children

      Component(s) to have spotlight effect.

      Node(s)

      null

    

    

      zIndex

      Z index of backdrop and wrapped component.

      Number or String

      1000

    

    

      center

      Centers label

      Boolean

      false

    

    

      style

      Inline style for label

      Object

      null

    

  

## License

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