postel

Postel 🌑

Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sense to render outside of your regular React root node, floating above all other content.

Postel is built on the idea of opening a generic set of props that allow wide customizability. With that, we attempt to keep the API as simple as possible.

• Usage
• Props
• Contributing
  • Installation

Tooltip

Custom content

Usage

The simplest usage of Postel is building something like a tooltip – just wrap it around the component that you want to trigger:

<Postel
  title="Toggle menu"
  content={
    <div className="tooltip">
      Tooltip content
    </div>
  }
  caret={
    <div className="caret" />
  }
}}>
  <button className="button">Trigger</button>
</Postel>

Props

children: React.ReactNode

A valid React child that Postel will attach listeners to.

title: string

A string to describe the purpose of what will be shown or hidden.

placement?: "auto" | "top" | "top-start" | "top-end" | "left" | "right" | "bottom" | "bottom-start" | "bottom-end"

The position that you want Postel to render your content relative to the children.

trigger?: "hover" | "click" | "mousedown"

The type of action you want to apply to the children that will show your content.

triggerDelay?: number

The time in milliseconds that you want to delay showing the content after triggering to show.

hideTrigger?: "click" | "mouseleave"

The type of action you want to signal that the content should hide.

hideDelay?: number

The time in milliseconds that you want to delay hiding the content after triggering to hide.

transitionOutMs?: number

Important for adding leave animations – the amount of time in milliseconds you want your content to animate out before unmounting.

showTransparentUnderlay?: boolean

Add this if you want a hidden transparent underlay that will cover the entire screen to prevent clicks on UI outside of your content.

Contributing

Contributions are welcome! For requests or bugs, please create an issue here.

Installation

Postel uses yarn to manage dependencies. To install, simply run:

git clone [e-mail]:timc1/postel.git

cd postel

yarn install

yarn start

Navigate to localhost:8080 and you should see a hot reloading interface to run the code against.