react-target-popup-modal

react component for highlighting any element of DOM with optional description which rendering in renderProps.

NOTE

• the component need to render on top level of app.

Install

npm install --save react-target-popup-modal

Usage

import React from 'react';

import {
  TargetPopup,
  TargetPopupRenderWrapper,
} from 'react-target-popup-modal';
import 'react-target-popup-modal/dist/index.css';

const App = () => {
  return (
    <div className='layout'>
      <div className='.some-element' />
      <TargetPopup
        querySelector='.some-element'
        color='#32e23d73'
        padding={20}
        renderElem={(elem) => (
          <TargetPopupRenderWrapper
            node={elem}
            position='TOP'
            distance={distancePX}
            distanceY={distancePercent}
          >
            <p className='paragraph'>Hello! I've rendered on TOP!</p>
          </TargetPopupRenderWrapper>
        )}
      />
    </div>
  );
};

TargetPopup props

| name | type | example values | default | description | | ------------------ | ------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | | isCanInteractive | boolean | true | true | if false, component just highlighted, but without any interactive events | | querySelector | string | '.className' or '#id' | empty string | pure Javascript selector, that need to find DOMNode in useEffect and call getBoundingClientRect() | | padding | number | 10 or -10 | 0 | Number of pixels, that wil increase or decrease highlighting window | | queryTop | number | -15 or 25 | 0 | Number of pixels, that wil increase or decrease top line of highlighting window | | queryBottom | number | -10 or 20 | 0 | Number of pixels, that wil increase or decrease bottom line of highlighting window | | queryLeft | number | -10 or 20 | 0 | Number of pixels, that wil increase or decrease left line of highlighting window | | queryRight | number | -10 or 20 | 0 | Number of pixels, that wil increase or decrease right line of highlighting window | | queryTopPercent | number | -2 or 1 | 0 | Number of css vh, that wil increase or decrease top line of highlighting window | | queryBottomPercent | number | -5 or 15 | 0 | Number of css vh, that wil increase or decrease bottom line of highlighting window | | queryLeftPercent | number | -12 or 23 | 0 | Number of css vw, that wil increase or decrease left line of highlighting window | | queryRightPercent | number | -10 or 20 | 0 | Number of css vh, that wil increase or decrease right line of highlighting window | | color | string | '#dc1bfeb3' or 'rgba(0, 0, 0, 0.4)' | rgba(0, 0, 0, 0.4) | Background color of popup | | renderElem | JSX.Element or null | (elem) => (Hello! I've rendered on TOP!) | null | It's the renderProp and required function that returns any components, but there parent must be |

TargetPopupRenderWrapper props

| name | type | example values | default | description | | --------- | --------------- | :-------------------------------: | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | node | typeof nodeObj | node | node | Required prop, that given from in first argument in renderProp function | | position | string | 'TOP','LEFT','BOTTOM','RIGHT' | Position relatively highlighted window | | distance | number | 10 or -10 | 0 | distance on main axis in pixels (see example for more details) | | distanceY | number | -15 or 25 | 0 | distance on Y axis relatively main axis in css vw or vh if main axis horizontal (see example for more details) | | children | React.ReactNode | I'm rendered component | undefined | Common React children |

License

MIT © Immortal230719