react-feather#Move JavaScript Examples

The following examples show how to use react-feather#Move. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Landing.js    From popper.js.org with MIT License 4 votes vote down vote up 
PlacementExample = () => {
  const [placement, setPlacement] = useState('top');
  const { reference, popper } = usePopper({
    placement,
    modifiers: [
      {
        name: 'flip',
        enabled: false,
      },
      // left/right placements on mobile
      {
        name: 'preventOverflow',
        options: {
          rootBoundary: 'document',
        },
      },
    ],
  });

  const code = `
import { createPopper } from '@popperjs/core';

const popcorn = document.querySelector('#popcorn');
const tooltip = document.querySelector('#tooltip');

createPopper(popcorn, tooltip, {
  placement: '${placement}',
});`;

  return (
    <ExampleBox>
      <DotContainer>
        {['top', 'right', 'bottom', 'left']
          .reduce(
            (placements, basePlacement) => [
              ...placements,
              // clockwise tabbing order
              ...(['bottom', 'left'].indexOf(basePlacement) >= 0
                ? [
                    `${basePlacement}-end`,
                    basePlacement,
                    `${basePlacement}-start`,
                  ]
                : [
                    `${basePlacement}-start`,
                    basePlacement,
                    `${basePlacement}-end`,
                  ]),
            ],
            []
          )
          .map((p) => (
            <DotHitArea
              key={p}
              onClick={() => setPlacement(p)}
              onMouseDown={() => setPlacement(p)}
              data-placement={p}
              aria-label={p}
              selected={placement === p}
            >
              <Dot selected={placement === p} />
            </DotHitArea>
          ))}
        <PopcornBox
          ref={reference}
          src={popcornBox}
          css={css`
            position: absolute;
            top: 50%;
            margin-top: -60px;
          `}
        />
        <Tooltip ref={popper}>
          <TooltipName data-small>Tip</TooltipName>
          <TooltipName>Popcorn</TooltipName>
          <Arrow data-popper-arrow />
        </Tooltip>
      </DotContainer>
      <ExampleText>
        <Heading>
          <Move /> Placement
        </Heading>
        <p>
          <strong>Click on the dots</strong> to place the tooltip. There are 12
          different placements to choose from.
        </p>
        <Highlight code={code} />
        <span>
          <ExternalLinkStyled to="https://codesandbox.io/s/github/popperjs/website/tree/master/examples/placement">
            Edit on CodeSandbox
          </ExternalLinkStyled>
        </span>
      </ExampleText>
    </ExampleBox>
  );
}