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"; { return <Spotlight => <div>Content with Spotlight Effect</div> </Spotlight> ; }
Usage with LabelWrapper
import React from "react";import Spotlight LabelWrapper from "rc-spotlight"; const BackdropText = <LabelWrapper > <div>text</div> </LabelWrapper>; const App = <Spotlight => <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 = = = > <Spotlight = > children </Spotlight> </Tooltip> ;;
And use it :
const App = <SpotlightWithTooltip ="right" = = > <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