Package Exports
- react-safety-triangle
- react-safety-triangle/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-safety-triangle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-safety-triangle
Introduction
This package contains an implementation of the Safety Triangle concept for context menu's, inspired by this article: https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/
Getting started
See the example on how to use the exported SafetyTriangle
component.
Import it into your project and render the component inside your page. The children
should contain your dropdown elements and the safety triangle will adjust to its size.
Make sure to setup your mouseLeave
event on a top level wrapping div with position: relative
, so the closing of your context menu takes both existing elements as well as the triangle into account.