@reach/popover

import React, { useRef, useState } from "react";
import Popover, { positionDefault } from "@reach/popover";

function Example() {
  const ref = useRef(null);
  const [value, setValue] = useState("");
  return (
    <div>
      <label>
        <span>Type for a special message</span>
        <input
          type="text"
          ref={ref}
          onChange={event => setValue(event.target.value)}
        />
      </label>

      {value.length > 0 && (
        <Popover targetRef={ref} position={positionDefault}>
          <div>
            <p>Whoa! Look at me!</p>
          </div>
        </Popover>
      )}
    </div>
  );
}

Current Tags

• 0.10.3                                ...           latest (5 years ago)
• 0.4.0-beta.0                                ...           next (6 years ago)

6 Versions

• 0.17.0                                ...           3 years ago
• 0.8.6                                ...           5 years ago
• 0.4.0                                ...           6 years ago
• 0.9.0                                ...           5 years ago
• 0.4.0-beta.0                                ...           6 years ago
• 0.10.3                                ...           5 years ago