Arrow

import { Arrow } from 'react-laag';

<Arrow /> is a utility component that is useful if you want to add an arrow to your layer. This is a common practice for especially tooltips, as well as menus. The <Arrow /> component composes a svg dynamically based on a couple of props you provide. The goal is to add arrow functionality in a declarative way, without the need to do any arrow specific calculations.

Props

fieldlayerSide
Type
LayerSide
Default
"top"

Determines which side the layer is currently on. This property is normally provided as part of the RenderLayerProps.

fieldstyle
Type
CSSProperties
Default
{}

Style that positions the arrow. This property (arrowStyle) is normally provided as part of the RenderLayerProps.

fieldsize
Type
number
Default
8

Distance in pixels between point of the arrow and the layer.

fieldangle
Type
number
Default
45

Angle of the point of the arrow in degrees. Accepts a value between 0-80, where a lower value results in a more pointy arrow.

fieldroundness
Type
number
Default
0

Value between 0 and 1. Determines how 'sharp' the point of the arrow should be, much like the 'border-radius' in css.

fieldborderWidth
Type
number
Default
0

The width of the border

fieldborderColor
Type
string
Default
"black"

The color of the border

fieldbackgroundColor
Type
string
Default
"white"

The background-color of the arrow

Example

import * as React from "react";
import { ToggleLayer, Arrow } from "react-laag";

<ToggleLayer
  renderLayer={({ layerProps, layerSide, arrowStyle }) =>
    isOpen && (
      <div {...layerProps}>
        <Arrow
          style={arrowStyle}
          layerSide={layerSide}
          size={8}
          angle={45}
          roundness={1}
          borderWidth={1}
          borderColor="black"
          backgroundColor="white"
        />
      </div>
    )
  }
>
  {({ triggerRef, toggle }) => (
    <button ref={triggerRef} onClick={toggle}>
      Toggle
    </button>
  )}
</ToggleLayer>;