New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

postel

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postel

A tiny and extensible component to build tooltips, flyovers, menus, and more.

  • 0.1.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Postel 🌑

npm version code style: prettier Built with Typescript badge

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.


Tooltip

Screen Shot 2020-07-04 at 6 01 50 PM

Custom content

Screen Shot 2020-07-04 at 6 01 50 PM

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.

preferredAutoPlacement?: "top" | "top-start" | "top-end" | "left" | "right" | "bottom" | "bottom-start" | "bottom-end"

If your placement is set to auto, this is the preferred position that you would like auto to default to.

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.

verticalOffset?: number

Add this if you want to vertically offset the content by n pxs.

horizontalOffset?: number

Add this if you want to horizontally offset the content by n pxs.

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 git@github.com: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.

Keywords

FAQs

Package last updated on 25 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc