@axa-fr/react-toolkit-popover
TypeScript icon, indicating that this package has built-in type declarations

2.3.1 • Public • Published

@axa-fr/react-toolkit-popover

  1. Installation
  2. Popover
  3. PopoverBase

Installation

npm i @axa-fr/react-toolkit-popover

Popover

Import

import Popover from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';

Use

const PopoverDefault = () => (
  <Popover mode="hover">
    <Popover.Pop>
      <p>Modal content</p>
    </Popover.Pop>
    <Popover.Over>
      <button>Source</button>
    </Popover.Over>
  </Popover>
);
export default PopoverDefault;

PopoverBase

Import

import { PopoverBase, PopoverPlacements } from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
import '@axa-fr/react-toolkit-popover/dist/af-help-custom.css';

Use

const PopoverBaseReturn = () => (
  <PopoverBase
    classModifier="custom"
    isOpen={true}
    placement={PopoverPlacements.right}>
    <PopoverBase.Pop>
      <div className="af-help-demo__container">
        <h3 className="af-help-demo__title">Profile</h3>
        <div className="af-help-demo__infos">
          <p className="af-help-demo__info">
            <span className="af-help-demo__info-title">Tweets</span>
            <span className="af-help-demo__info-number">1,337</span>
          </p>
          <p className="af-help-demo__info">
            <span className="af-help-demo__info-title">Following</span>
            <span className="af-help-demo__info-number">561</span>
          </p>
          <p className="af-help-demo__info">
            <span className="af-help-demo__info-title">Followers</span>
            <span className="af-help-demo__info-number">718</span>
          </p>
        </div>
      </div>
    </PopoverBase.Pop>
    <PopoverBase.Over>
      <button type="button" id="idbouton">
        Bouton d'exemple
      </button>
    </PopoverBase.Over>
  </PopoverBase>
);
export default PopoverBaseReturn;

Readme

Keywords

none

Package Sidebar

Install

npm i @axa-fr/react-toolkit-popover

Weekly Downloads

76

Version

2.3.1

License

MIT

Unpacked Size

69.3 kB

Total Files

51

Last publish

Collaborators

  • martinweb
  • fcornaire
  • guillaume.chervet.axa
  • samuel-gomez
  • antoine.blancke
  • arnaudforaison