Positioned dialog

An example of positioning the dialog using the provided usePosition hook.

import { useRef, useState } from 'react';
import { Dialog, placementOptions } from '@citizensadvice/react-dialogs';

export function Example() {
  const [show, setShow] = useState();
  const [placements, setPlacements] = useState(undefined);
  const [contain, setContain] = useState(false);
  const [showArrow, setShowArrow] = useState(true);
  const [borderRadius, setBorderRadius] = useState('');
  const [slide, setSlide] = useState(true);

  const buttonRef = useRef();
  const dialogRef = useRef();
  const containRef = useRef();

  return (
    <>
      <label htmlFor="placement">
        Placement{' '}
        <select
          id="placement"
          value={placements}
          onChange={({ target: { value } }) => setPlacements(value)}
        >
          <option value="">Auto</option>
          {placementOptions.map((name) => (
            <option key={name}>{name}</option>
          ))}
        </select>
      </label>
      <label htmlFor="contain">
        <input
          type="checkbox"
          onChange={({ target: { checked } }) => setContain(checked)}
          id="contain"
          checked={contain}
        />{' '}
        Contained
      </label>
      <label htmlFor="showArrow">
        <input
          type="checkbox"
          onChange={({ target: { checked } }) => setShowArrow(checked)}
          id="showArrow"
          checked={showArrow}
        />{' '}
        Show arrow
      </label>
      <label htmlFor="slide">
        <input
          type="checkbox"
          onChange={({ target: { checked } }) => setSlide(checked)}
          id="slide"
          checked={slide}
        />{' '}
        Slide
      </label>
      <label htmlFor="borderRadius">
        Border radius{' '}
        <input
          onChange={({ target: { value } }) => setBorderRadius(value)}
          id="borderRadius"
          value={borderRadius}
        />
      </label>
      <div className={contain ? 'scrolling' : null} ref={containRef}>
        <div className="centred-button">
          <button
            type="button"
            onClick={() => setShow(!show)}
            aria-expanded={show}
            aria-haspopup="dialog"
            ref={buttonRef}
          >
            Toggle
          </button>
          {show && (
            <Dialog
              anchorRef={buttonRef}
              className="dialog-small"
              containRef={contain ? containRef : null}
              onClose={() => setShow(false)}
              positionOptions={{
                placement: placements,
                scroll: true,
                showArrow,
                slide,
              }}
              ref={dialogRef}
              style={{ borderRadius }}
              title="Dialog title"
            >
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </Dialog>
          )}
        </div>
      </div>
    </>
  );
}