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

LabelWrapper API

License

MIT © kerematam