rc-spotlight

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

Install

npm install --save rc-spotlight

Demo

Usage

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

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

Create Wrapper for Spotlight with Tooltip :

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 :

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

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