npm

برای نصب این کتابخانه توسط npm کد زیر را در ترمینال خود بنویسید .

npm install --save react-element-popper

yarn

اگر از yarn استفاده میکنید میتونید از کد زیر استفاده کنید.

yarn add react-element-popper

ایمپورت کردن کتابخانه در پروژه

در بیشتر مواقع ایمپورت کردن ElementPopper به تنهایی کفایت میکنه.

import ElementPopper from "react-element-popper"

ولی اگر بخواید از فلش (arrow) استفاده کنید، یا بخواید برای پاپر از سایه پیشفرض استفاده کنید باید استایل ها رو هم import کنید.

import "react-element-popper/build/element_popper.css"

استفاده

import React from "react"
import ElementPopper from "react-element-popper"

export default function Example() {
  const Div = ({ children }) => (
    <div
      style={{
        border: "1px solid black",
        backgroundColor: "white"
      }}
    >
      { children}
    </div>
  )

  return (
    <ElementPopper
      element={<Div>Refrence Element</Div>}
      popper={<Div>Popper Element</Div>}
    />
  )
}