A react component that brings other components into visual focus/highlight by placing an overlay over all other elements on the page. Requires React 16 or higher
Example: https://react-focus-component.now.sh/
import { FocusOverlay } from 'react-focus-component';
class BasicExample extends React.Component {
constructor(props) {
super(props);
this.component = React.createRef();
}
render() {
return (
<div>
<div ref={this.component}>
This element will be highlighted because the "ref" is passed to the FocusOverlay as the focusComponent prop.
</div>
<FocusOverlay focusComponent={this.component.current} onExit={() => alert('runs when the user clicks in the overlay')} />
</div>
);
}
}
focusComponent
- A DOM element instance or an array of DOM elements to calculate the outer boundries of the focus point. This can also be a custom set of coordinates ({ height, width, x, y }
), but note that these coordinates are reletive to the scroll position and will not automatically update on page scroll. This should be managed outside of the component.onExit
- called when the user clicks on the overlay.target
- Determines where the children (if any) will be rendered. Possible values:topleft
,top
,topright
,left
,right
,bottomleft
,bottom
(DEFAULT),bottomright
.
- Dependencies: Node 8 or greater.
- Running examples:
npm start
. - Testing:
npm test
ornpm run unittest
ornpm run test-watch
. Write tests in__tests__
folder. - Linting:
npm test
ornpm run lint
. Fix:npm run lint-fix
. - Build & publish:
npm publish
to build transpiled output todist
folder and publish it to the NPM registry. Requires environment variableNPM_TOKEN
. - Deploy:
npm run deploy
deploys to ZEIT Now. Requires environment variableNOW_TOKEN
.
MIT