Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-joyride
Advanced tools
react-joyride - npm Package Compare versions
Comparing version 2.7.3 to 2.7.4
@@ -139,18 +139,72 @@ import * as React from 'react'; | ||
| type BaseProps = { | ||
| /** | ||
| * A React component to use instead the default Beacon. | ||
| */ | ||
| beaconComponent?: ElementType<BeaconRenderProps>; | ||
| /** | ||
| * Disable closing the tooltip on ESC. | ||
| * @default false | ||
| */ | ||
| disableCloseOnEsc?: boolean; | ||
| /** | ||
| * Don't show the overlay. | ||
| * @default false | ||
| */ | ||
| disableOverlay?: boolean; | ||
| /** | ||
| * Don't close the tooltip when clicking the overlay. | ||
| * @default false | ||
| */ | ||
| disableOverlayClose?: boolean; | ||
| /** | ||
| * Disable the fix to handle "unused" overflow parents. | ||
| * @default false | ||
| */ | ||
| disableScrollParentFix?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| disableScrolling?: boolean; | ||
| /** | ||
| * Options to be passed to react-floater | ||
| */ | ||
| floaterProps?: Partial<Props$1>; | ||
| /** | ||
| * Hide the Back button. | ||
| * @default false | ||
| */ | ||
| hideBackButton?: boolean; | ||
| /** | ||
| * Hide the Close button. | ||
| * @default false | ||
| */ | ||
| hideCloseButton?: boolean; | ||
| /** | ||
| * The strings used in the tooltip. | ||
| */ | ||
| locale?: Locale; | ||
| nonce?: string; | ||
| /** | ||
| * @default false | ||
| */ | ||
| showProgress?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| showSkipButton?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| spotlightClicks?: boolean; | ||
| /** | ||
| * The padding of the spotlight. | ||
| * @default 10 | ||
| */ | ||
| spotlightPadding?: number; | ||
| /** | ||
| * Override the styling of the Tooltip | ||
| */ | ||
| styles?: PartialDeep<Styles>; | ||
| /** | ||
| * A React component to use instead the default Tooltip. | ||
| */ | ||
| tooltipComponent?: ElementType<TooltipRenderProps>; | ||
@@ -173,10 +227,38 @@ }; | ||
| type CallBackProps = { | ||
| /** | ||
| * The action that updated the state. | ||
| */ | ||
| action: Actions; | ||
| /** | ||
| * It the tour is in `controlled` mode. | ||
| * (using the `stepIndex` prop) | ||
| */ | ||
| controlled: boolean; | ||
| /** | ||
| * The current step's index | ||
| */ | ||
| index: number; | ||
| /** | ||
| * The step's lifecycle. | ||
| */ | ||
| lifecycle: Lifecycle; | ||
| /** | ||
| * The element that triggered the action (if available). | ||
| */ | ||
| origin: Origin | null; | ||
| /** | ||
| * The number of steps | ||
| */ | ||
| size: number; | ||
| /** | ||
| * The tour's status. | ||
| */ | ||
| status: Status; | ||
| /** | ||
| * The current step's data. | ||
| */ | ||
| step: Step; | ||
| /** | ||
| * The type of the event. | ||
| */ | ||
| type: Events; | ||
@@ -190,11 +272,53 @@ }; | ||
| type Props = Simplify<BaseProps & { | ||
| /** | ||
| * A function to be called when Joyride's state changes. | ||
| * It returns a single parameter with the state. | ||
| */ | ||
| callback?: Callback; | ||
| /** | ||
| * The tour is played sequentially with the Next button. | ||
| * @default false | ||
| */ | ||
| continuous?: boolean; | ||
| /** | ||
| * Log Joyride's actions to the console. | ||
| * @default false | ||
| */ | ||
| debug?: boolean; | ||
| /** | ||
| * Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info` | ||
| */ | ||
| getHelpers?: (helpers: StoreHelpers) => any; | ||
| /** | ||
| * A nonce value for inline styles (Content Security Policy - CSP) | ||
| */ | ||
| nonce?: string; | ||
| /** | ||
| * Run/stop the tour. | ||
| * @default true | ||
| */ | ||
| run: boolean; | ||
| /** | ||
| * The duration for scroll to element. | ||
| * @default 300 | ||
| */ | ||
| scrollDuration?: number; | ||
| /** | ||
| * The scroll distance from the element scrollTop value. | ||
| * @default 20 | ||
| */ | ||
| scrollOffset?: number; | ||
| /** | ||
| * Scroll the page for the first step. | ||
| * @default false | ||
| */ | ||
| scrollToFirstStep?: boolean; | ||
| /** | ||
| * Setting a number here will turn Joyride into `controlled` mode. | ||
| * You'll have to keep an internal state by yourself and update it with the events in the `callback`. | ||
| */ | ||
| stepIndex?: number; | ||
| /** | ||
| * The tour's steps. | ||
| */ | ||
| steps: Array<Step>; | ||
@@ -212,12 +336,51 @@ }>; | ||
| type Step = Simplify<BaseProps & { | ||
| /** | ||
| * The tooltip's body. | ||
| */ | ||
| content: ReactNode; | ||
| /** | ||
| * Don't show the Beacon before the tooltip. | ||
| * @default false | ||
| */ | ||
| disableBeacon?: boolean; | ||
| event?: string; | ||
| /** | ||
| * The event to trigger the beacon. | ||
| * @default click | ||
| */ | ||
| event?: 'click' | 'hover'; | ||
| /** | ||
| * Options to be passed to react-floater | ||
| */ | ||
| floaterProps?: Props$1; | ||
| /** | ||
| * Hide the tooltip's footer. | ||
| * @default false | ||
| */ | ||
| hideFooter?: boolean; | ||
| /** | ||
| * Force the step to be fixed. | ||
| * @default false | ||
| */ | ||
| isFixed?: boolean; | ||
| /** | ||
| * @default 10 | ||
| */ | ||
| offset?: number; | ||
| /** | ||
| * The placement of the beacon and tooltip. It will re-position itself if there's no space available. | ||
| * @default bottom | ||
| */ | ||
| placement?: Placement | 'auto' | 'center'; | ||
| /** | ||
| * The placement of the beacon. It will use the `placement` if nothing is passed | ||
| */ | ||
| placementBeacon?: Placement; | ||
| /** | ||
| * The target for the step. | ||
| * It can be a CSS selector or an HTMLElement ref. | ||
| */ | ||
| target: string | HTMLElement; | ||
| /** | ||
| * The tooltip's title. | ||
| */ | ||
| title?: ReactNode; | ||
@@ -224,0 +387,0 @@ }>; |
| { | ||
| "name": "react-joyride", | ||
| "version": "2.7.3", | ||
| "version": "2.7.4", | ||
| "description": "Create guided tours for your apps", | ||
@@ -5,0 +5,0 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", |
@@ -10,18 +10,72 @@ import { ElementType, MouseEventHandler, ReactNode, RefCallback } from 'react'; | ||
| export type BaseProps = { | ||
| /** | ||
| * A React component to use instead the default Beacon. | ||
| */ | ||
| beaconComponent?: ElementType<BeaconRenderProps>; | ||
| /** | ||
| * Disable closing the tooltip on ESC. | ||
| * @default false | ||
| */ | ||
| disableCloseOnEsc?: boolean; | ||
| /** | ||
| * Don't show the overlay. | ||
| * @default false | ||
| */ | ||
| disableOverlay?: boolean; | ||
| /** | ||
| * Don't close the tooltip when clicking the overlay. | ||
| * @default false | ||
| */ | ||
| disableOverlayClose?: boolean; | ||
| /** | ||
| * Disable the fix to handle "unused" overflow parents. | ||
| * @default false | ||
| */ | ||
| disableScrollParentFix?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| disableScrolling?: boolean; | ||
| /** | ||
| * Options to be passed to react-floater | ||
| */ | ||
| floaterProps?: Partial<FloaterProps>; | ||
| /** | ||
| * Hide the Back button. | ||
| * @default false | ||
| */ | ||
| hideBackButton?: boolean; | ||
| /** | ||
| * Hide the Close button. | ||
| * @default false | ||
| */ | ||
| hideCloseButton?: boolean; | ||
| /** | ||
| * The strings used in the tooltip. | ||
| */ | ||
| locale?: Locale; | ||
| nonce?: string; | ||
| /** | ||
| * @default false | ||
| */ | ||
| showProgress?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| showSkipButton?: boolean; | ||
| /** | ||
| * @default false | ||
| */ | ||
| spotlightClicks?: boolean; | ||
| /** | ||
| * The padding of the spotlight. | ||
| * @default 10 | ||
| */ | ||
| spotlightPadding?: number; | ||
| /** | ||
| * Override the styling of the Tooltip | ||
| */ | ||
| styles?: PartialDeep<Styles>; | ||
| /** | ||
| * A React component to use instead the default Tooltip. | ||
| */ | ||
| tooltipComponent?: ElementType<TooltipRenderProps>; | ||
@@ -51,10 +105,38 @@ }; | ||
| export type CallBackProps = { | ||
| /** | ||
| * The action that updated the state. | ||
| */ | ||
| action: Actions; | ||
| /** | ||
| * It the tour is in `controlled` mode. | ||
| * (using the `stepIndex` prop) | ||
| */ | ||
| controlled: boolean; | ||
| /** | ||
| * The current step's index | ||
| */ | ||
| index: number; | ||
| /** | ||
| * The step's lifecycle. | ||
| */ | ||
| lifecycle: Lifecycle; | ||
| /** | ||
| * The element that triggered the action (if available). | ||
| */ | ||
| origin: Origin | null; | ||
| /** | ||
| * The number of steps | ||
| */ | ||
| size: number; | ||
| /** | ||
| * The tour's status. | ||
| */ | ||
| status: Status; | ||
| /** | ||
| * The current step's data. | ||
| */ | ||
| step: Step; | ||
| /** | ||
| * The type of the event. | ||
| */ | ||
| type: Events; | ||
@@ -73,11 +155,53 @@ }; | ||
| BaseProps & { | ||
| /** | ||
| * A function to be called when Joyride's state changes. | ||
| * It returns a single parameter with the state. | ||
| */ | ||
| callback?: Callback; | ||
| /** | ||
| * The tour is played sequentially with the Next button. | ||
| * @default false | ||
| */ | ||
| continuous?: boolean; | ||
| /** | ||
| * Log Joyride's actions to the console. | ||
| * @default false | ||
| */ | ||
| debug?: boolean; | ||
| /** | ||
| * Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info` | ||
| */ | ||
| getHelpers?: (helpers: StoreHelpers) => any; | ||
| /** | ||
| * A nonce value for inline styles (Content Security Policy - CSP) | ||
| */ | ||
| nonce?: string; | ||
| /** | ||
| * Run/stop the tour. | ||
| * @default true | ||
| */ | ||
| run: boolean; | ||
| /** | ||
| * The duration for scroll to element. | ||
| * @default 300 | ||
| */ | ||
| scrollDuration?: number; | ||
| /** | ||
| * The scroll distance from the element scrollTop value. | ||
| * @default 20 | ||
| */ | ||
| scrollOffset?: number; | ||
| /** | ||
| * Scroll the page for the first step. | ||
| * @default false | ||
| */ | ||
| scrollToFirstStep?: boolean; | ||
| /** | ||
| * Setting a number here will turn Joyride into `controlled` mode. | ||
| * You'll have to keep an internal state by yourself and update it with the events in the `callback`. | ||
| */ | ||
| stepIndex?: number; | ||
| /** | ||
| * The tour's steps. | ||
| */ | ||
| steps: Array<Step>; | ||
@@ -99,12 +223,51 @@ } | ||
| BaseProps & { | ||
| /** | ||
| * The tooltip's body. | ||
| */ | ||
| content: ReactNode; | ||
| /** | ||
| * Don't show the Beacon before the tooltip. | ||
| * @default false | ||
| */ | ||
| disableBeacon?: boolean; | ||
| event?: string; | ||
| /** | ||
| * The event to trigger the beacon. | ||
| * @default click | ||
| */ | ||
| event?: 'click' | 'hover'; | ||
| /** | ||
| * Options to be passed to react-floater | ||
| */ | ||
| floaterProps?: FloaterProps; | ||
| /** | ||
| * Hide the tooltip's footer. | ||
| * @default false | ||
| */ | ||
| hideFooter?: boolean; | ||
| /** | ||
| * Force the step to be fixed. | ||
| * @default false | ||
| */ | ||
| isFixed?: boolean; | ||
| /** | ||
| * @default 10 | ||
| */ | ||
| offset?: number; | ||
| /** | ||
| * The placement of the beacon and tooltip. It will re-position itself if there's no space available. | ||
| * @default bottom | ||
| */ | ||
| placement?: Placement | 'auto' | 'center'; | ||
| /** | ||
| * The placement of the beacon. It will use the `placement` if nothing is passed | ||
| */ | ||
| placementBeacon?: Placement; | ||
| /** | ||
| * The target for the step. | ||
| * It can be a CSS selector or an HTMLElement ref. | ||
| */ | ||
| target: string | HTMLElement; | ||
| /** | ||
| * The tooltip's title. | ||
| */ | ||
| title?: ReactNode; | ||
@@ -111,0 +274,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.24%
467366
- Lines of code
- increased by4.61%
7392
No dependency changes