Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@leafygreen-ui/guide-cue

Package Overview
Dependencies
Maintainers
0
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/guide-cue

leafyGreen UI Kit GuideCue

  • 6.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
104K
increased by152.28%
Maintainers
0
Weekly downloads
 
Created
Source

GuideCue

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/guide-cue

NPM

npm install @leafygreen-ui/guide-cue

Example

Stand-alone example

import { GuideCue } from '@leafygreen-ui/guide-cue';

const [open, setOpen] = useState(true);

<GuideCue
  open={open}
  setOpen={setOpen}
  title="New feature"
  refEl={triggerRef}
  numberOfSteps={1}
  currentStep={1}
  onPrimaryButtonClick={() => {
    // do something
  }}
>
  This is a new feature. You should try it out
</GuideCue>;

or

Multi-step example

import GuideCue from '@leafygreen-ui/guide-cue';

const [open, setOpen] = useState(true);

<GuideCue
  open={open}
  setOpen={setOpen}
  title="New feature"
  refEl={triggerRef}
  numberOfSteps={4}
  currentStep={2}
  onPrimaryButtonClick={() => {
    // do something
  }}
  onDismiss={() => {
    // do something
  }}
>
  This is a new feature. You should try it out
</GuideCue>;

An example of how to use the multi-step tooltip can be found in (storybook - MultistepDemo)[https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/src/GuideCue.story.tsx]

Usage

There are two variations of the tooltip -- stand-alone and multi-step. The multi-step tooltip shows the number of steps, has a dismiss and primary button, and displays a pulsing beacon while the stand-alone tooltip only shows the primary button and does not include the number of steps or the dismiss button.

The variant that is shown depends on the number of steps. If numberOfSteps > 1 the multi-step tooltip is shown else the stand-alone tooltip is shown.

Properties

PropTypeDescriptionDefault
openbooleanDetermines if the Tooltip will appear as open or close.false
setOpenfunctionCallback to change the open state of the Tooltip.(boolean) => boolean
refElHTMLElementReference to an element that the tooltip should be positioned against.null
numberOfStepsnumberUsed to determine which tooltip will be shown. If numberOfSteps > 1 then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip.1
currentStepnumberUsed to display the current step. If numberOfSteps === 1 this number will not display.1
darkModebooleanDetermines whether the Tooltip will appear in dark mode.false
titlestringTitle to appear inside of Tooltip.''
childrenReact.ReactNodeBody content to appear inside the tooltip, under the title.''
buttonTextstringText to appear inside the primary button. The default text for the stand-alone tooltip is Got it. The default text for the multi-step tooltip varies on the numberOfSteps and currentStep. If numberOfSteps === currentStep the text is Got it else it is `Next.'Next'
onDismissfunctionCallback fired when the dismiss(X) button is clicked or when the Esc key is pressed. This only applies to the multi-step tooltip.() => {}
onPrimaryButtonClickfunctionCallback fired when the bottom primary button is clicked. This applies to both the stand-alone and multi-step tooltip. This is also fired when the Esc key is pressed in the stand-alone tooltip.() => {}
tooltipClassNamestringClassName to be applied to the tooltip element.''
tooltipAlign'top' | 'bottom' | 'left' | 'right'Determines the alignment of the tooltip.top
tooltipJustify'start' | 'middle' | 'end'Determines the justification of the tooltip.middle
beaconAlign'top' | 'bottom' | 'left' | 'right' | 'center-horizontal' | 'center-vertical'Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip.center-horizontal
...native div attributesAny other props will be spread on the tooltip div element

FAQs

Package last updated on 04 Dec 2024

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