@matt-dunn/react-wireframes

Index

Type aliases

Variables

Functions

Type aliases

APIOptions

APIOptions: { highlightNote?: (annotation?: WireframeAnnotation) => void; updater: (annotations: WireframeAnnotations) => void }

Type declaration

Optional highlightNote?: (annotation?: WireframeAnnotation) => void
- - (annotation?: WireframeAnnotation): void
  - Parameters
    - Optional annotation: WireframeAnnotation
    Returns void
updater: (annotations: WireframeAnnotations) => void
- - (annotations: WireframeAnnotations): void
  - Parameters
    - annotations: WireframeAnnotations
    Returns void

IdentifierProps

IdentifierProps: { annotation: WireframeAnnotation; parentReference?: ParentReference; show?: boolean }

Type declaration

annotation: WireframeAnnotation
Optional parentReference?: ParentReference
Optional show?: boolean

OpenCallback

OpenCallback: (isOpen: boolean) => void

Type declaration

- (isOpen: boolean): void
- Parameters
  - isOpen: boolean
  Returns void

ParentReference

ParentReference: { api: WireframeAnnotationAPI; id: number }

Type declaration

api: WireframeAnnotationAPI
id: number

WireframeAnnotation

WireframeAnnotation: { Component: ComponentType<any>; count: number; id: number; options: WireframeAnnotationOptions }

Type declaration

Component: ComponentType<any>
count: number
id: number
options: WireframeAnnotationOptions

WireframeAnnotationAPI

WireframeAnnotationAPI: { getAnnotations: () => WireframeAnnotations; getParentReference: () => ParentReference | undefined; highlightNote: (Component: ComponentType<any> | undefined) => void; isOpen: () => boolean; onOpen: (cb: OpenCallback) => { unregister: () => void }; register: (Component: ComponentType<any>, options: WireframeAnnotationOptions) => WireframeAnnotation; setOpen: (isOpen: boolean) => boolean; setOptions: (options: APIOptions) => APIOptions; setParentReference: (parentReference: ParentReference) => void; unregister: (Component: ComponentType<any>) => void }

Type declaration

getAnnotations: () => WireframeAnnotations
- - (): WireframeAnnotations
  - Returns WireframeAnnotations
getParentReference: () => ParentReference | undefined
- - (): ParentReference | undefined
  - Returns ParentReference | undefined
highlightNote: (Component: ComponentType<any> | undefined) => void
- - (Component: ComponentType<any> | undefined): void
 - Parameters
 - Component: ComponentType<any> | undefined
 Returns void
isOpen: () => boolean
- - (): boolean
  - Returns boolean
onOpen: (cb: OpenCallback) => { unregister: () => void }
- - (cb: OpenCallback): { unregister: () => void }
  - Parameters
    - cb: OpenCallback
    Returns { unregister: () => void }
    - unregister: () => void
      - (): void
        
        Returns void
register: (Component: ComponentType<any>, options: WireframeAnnotationOptions) => WireframeAnnotation
- - (Component: ComponentType<any>, options: WireframeAnnotationOptions): WireframeAnnotation
 - Parameters
 - Component: ComponentType<any>
 - options: WireframeAnnotationOptions
 Returns WireframeAnnotation
setOpen: (isOpen: boolean) => boolean
- - (isOpen: boolean): boolean
  - Parameters
    - isOpen: boolean
    Returns boolean
setOptions: (options: APIOptions) => APIOptions
- - (options: APIOptions): APIOptions
  - Parameters
    - options: APIOptions
    Returns APIOptions
setParentReference: (parentReference: ParentReference) => void
- - (parentReference: ParentReference): void
  - Parameters
    - parentReference: ParentReference
    Returns void
unregister: (Component: ComponentType<any>) => void
- - (Component: ComponentType<any>): void
 - Parameters
 - Component: ComponentType<any>
 Returns void

WireframeAnnotationOptions

WireframeAnnotationOptions: { description: ReactNode; title: ReactNode }

Type declaration

description: ReactNode
title: ReactNode

WireframeAnnotationProps

WireframeAnnotationProps: { children?: ReactNode; className?: string; isHighlighted?: boolean; outline?: boolean }

Type declaration

Optional children?: ReactNode
Optional className?: string
Optional isHighlighted?: boolean
Optional outline?: boolean

WireframeAnnotations

WireframeAnnotations: WireframeAnnotation[]

WireframeAnnotationsNoteProps

WireframeAnnotationsNoteProps: { annotation: WireframeAnnotation; isHighlighted?: boolean; parentReference?: ParentReference }

Type declaration

annotation: WireframeAnnotation
Optional isHighlighted?: boolean
Optional parentReference?: ParentReference

WireframeAnnotationsNotesProps

WireframeAnnotationsNotesProps: { annotations?: WireframeAnnotations; className?: string; highlightedNote?: WireframeAnnotation; parentReference?: ParentReference }

Type declaration

Optional annotations?: WireframeAnnotations
Optional className?: string
Optional highlightedNote?: WireframeAnnotation
Optional parentReference?: ParentReference

WireframeContainerProps

WireframeContainerProps: { children: ReactNode; className?: string; defaultOpen?: boolean; fixed?: boolean; onHighlightAnnotation?: (wireframeAnnotation: WireframeAnnotation, element: Element) => void; onToggleOpen?: (isOpen: boolean) => void; open?: boolean }

Type declaration

children: ReactNode
Optional className?: string
Optional defaultOpen?: boolean

Set the default annotation open state
Optional fixed?: boolean

Fix the WireframeContainer to the viewport
Optional onHighlightAnnotation?: (wireframeAnnotation: WireframeAnnotation, element: Element) => void

param

Highlighted annotation

param

Attached DOM element
- - (wireframeAnnotation: WireframeAnnotation, element: Element): void
  - Parameters
    - wireframeAnnotation: WireframeAnnotation
    - element: Element
    Returns void
Optional onToggleOpen?: (isOpen: boolean) => void

Called when open state is changed

param

Open state
- - (isOpen: boolean): void
  - Parameters
    - isOpen: boolean
    Returns void
Optional open?: boolean

Make the container open state controlled. onToggleOpen must be implemented to set external state.

WireframeProviderProps

WireframeProviderProps: { api: WireframeAnnotationAPI; children: ReactNode }

Type declaration

api: WireframeAnnotationAPI
children: ReactNode

useScrollElementIntoViewProps

useScrollElementIntoViewProps<T>: { boundary: HTMLElement | null; element: HTMLElement | null; onScrollIntoView?: (el: HTMLElement) => void }

Type parameters

Type declaration

boundary: HTMLElement | null
element: HTMLElement | null
Optional onScrollIntoView?: (el: HTMLElement) => void
- - (el: HTMLElement): void
  - Parameters
    - el: HTMLElement
    Returns void

Variables

Const ActiveWireframeAnnotationContext

ActiveWireframeAnnotationContext: Context<WireframeAnnotationAPI> = createContext<WireframeAnnotationAPI | undefined>(undefined)

Const IdentifierBase

IdentifierBase: ForwardRefExoticComponent<IdentifierProps & RefAttributes<unknown>> = React.forwardRef(({ annotation, parentReference, className }: IdentifierProps, ref) => (<IdentifierContainer ref={ref as any} data-annotation-identifier className={className}>{[...(parentReference && getParentId(parentReference)) || [], annotation.id].join(".")}</IdentifierContainer>))

Const IdentifierContainer

IdentifierContainer: StyledComponent<IdentifierProps & RefAttributes<any>, Pick<IdentifierProps & RefAttributes<any>, "className" | "annotation" | "parentReference">, object> = styled(IdentifierBase)`position: absolute;top: -1em;left: -1em;z-index: 4000;cursor: default;transition: opacity 250ms, visibility 250ms;opacity: 0.75;visibility: visible;&.fade-Identifier.enter {opacity: 0;visibility: hidden;}&.fade-Identifier.enter-active {opacity: 0.75;visibility: visible;}&.fade-Identifier.exit {opacity: 0.75;visibility: visible;}&.fade-Identifier.exit-active {opacity: 0;visibility: hidden;}`

Const IdentifierNote

IdentifierNote: StyledComponent<IdentifierProps & RefAttributes<any>, Pick<IdentifierProps & RefAttributes<any>, "className" | "annotation" | "parentReference">, object> = styled(Identifier)`margin-right: 0.5em;border-width: 1px;border-style: solid;font-size: 0.75rem;align-self: flex-start;`

Const NoAnnotations

NoAnnotations: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "color" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object> = styled.div`padding: 20px;text-align: center;color: #888;font-size: 2rem;font-weight: lighter;line-height: 1;display: flex;align-items: center;justify-content: center;> p {max-width: 75%;margin: 0;padding: 0;}`

Const WireframeAnnotationComponentContext

WireframeAnnotationComponentContext: Context<WireframeAnnotation> = createContext<WireframeAnnotation | undefined>(undefined)

Const WireframeAnnotationContext

WireframeAnnotationContext: Context<WireframeAnnotationAPI> = createContext<WireframeAnnotationAPI | undefined>(undefined)

Const WireframeAnnotationNotesContainer

WireframeAnnotationNotesContainer: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "color" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object> = styled.div`overflow: hidden;z-index: 1;position: relative;background-color: inherit;display: flex;flex-grow: 1;> * {overflow-x: hidden;overflow-y: auto;}`

Const WireframeAnnotationsClose

Const WireframeAnnotationsContainer

WireframeAnnotationsContainer: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "children" | "color" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object> = styled.section`all: initial;font-family: inherit;line-height: 1.5;flex-grow: 0;flex-shrink: 0;max-width: 400px;padding: 0;transition: width ${transition}, min-width ${transition};position: relative;&:hover {[data-annotations-toggle] {transform: translate(-100%, -50%);}}`

Const WireframeAnnotationsNoteContainer

WireframeAnnotationsNoteContainer: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, { isHighlighted: boolean }, object> = styled.article<{isHighlighted: boolean}>`font-size: 0.85rem;word-break: break-word;padding: 6px 10px;> header {display: flex;margin-bottom: 5px;align-items: center;h2 {font-size: 1.2rem;margin: 0;font-weight: normal;}}${({ isHighlighted }) => isHighlighted && css`background-color: rgba(64, 134, 247, 0.25);`}`

Const WireframeAnnotationsToggle

WireframeAnnotationsToggle: StyledComponent<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, { open: boolean }, object> = styled.button<{open: boolean}>`margin: 0;padding: 0;position: absolute;left: 0;top: 50%;background-color: #555;color: #fff;border: none;border-radius: 0.5rem 0 0 0.5rem;transform: ${({ open }) => (open && css`translate(0, -50%)`) || css`translate(-100%, -50%)`};transition: opacity 100ms, transform 100ms;display: flex;flex-direction: row;align-items: center;opacity: ${({ open }) => (open && 1) || 0.25};font-size: 1rem;min-height: 3.5em;cursor: pointer;&:active,&:focus,&:hover {outline: none;opacity: 1;}span {all: initial;cursor: inherit;color: inherit;padding: 0.25em;font-size: 1.25em;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight: bold;transition: transform ${transitionDuration}ms;display: block;${({ open }) => !open && css`transform: rotate(180deg);`};}`

Const WireframeAnnotationsWrapper

WireframeAnnotationsWrapper: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { fixed: boolean }, object> = styled.div<{fixed: boolean}>`flex-grow: 0;flex-shrink: 0;border-left: 2px solid #555;padding: 0;width: 25%;max-width: 400px;min-width: 250px;right: 0;top: 0;bottom: 0;background-color: #fafafa;display: flex;flex-direction: column;transition: transform ${transition};z-index: 6000;position: absolute;${({ fixed }) => fixed !== false && css`position: fixed;`}header.annotations {padding: 0.1em 0.75em;background-color: #555;color: #fff;display: flex;flex-shrink: 0;align-items: center;h1 {flex-grow: 1;font-size: 1.5em;margin: 0;line-height: 1.5;font-weight: lighter;}}`

Const WireframeBody

Const WireframeMainContainer

WireframeMainContainer: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { fixed: boolean }, object> = styled.div<{fixed: boolean}>`display: flex;${({ fixed }) => fixed === false && css`overflow: hidden;`}> [data-annotations-container] {width: 0;min-width: 0;[data-annotations] {transform: translateX(100%);}}&.open {> [data-annotations-container] {width: 25%;min-width: 250px;> [data-annotations] {transform: translateX(0);}}}`

Const Wrapper

Wrapper: StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, { show: boolean }, object> = styled.span<{show: boolean}>`position: relative;[disabled] {pointer-events: none;}&.outlined,&.outline:hover {${({ show }) => show && css`z-index: 5000;> * {box-shadow: 0 0 0 1px #4086f7 !important;}`}}&.outlined,&:hover {> [data-annotation-identifier] {transition: opacity 0ms, visibility 0ms;opacity: 1;}}`

Const transition

transition: string = `${transitionDuration}ms ease-in-out`

Const transitionDuration

transitionDuration: 250 = 250

Const useIsomorphicLayoutEffect

useIsomorphicLayoutEffect: useLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect

Functions

API

API(defaultOptions?: APIOptions): WireframeAnnotationAPI

- Defined in packages/react-wireframes/src/api.ts:50
Parameters
- Optional defaultOptions: APIOptions
Returns WireframeAnnotationAPI

Const Identifier

Identifier(__namedParameters: { annotation: WireframeAnnotation; parentReference: ParentReference; show: boolean }): Element

- Defined in packages/react-wireframes/src/withWireframeAnnotation/Identifier.tsx:48
Parameters
- __namedParameters: { annotation: WireframeAnnotation; parentReference: ParentReference; show: boolean }
  - annotation: WireframeAnnotation
  - parentReference: ParentReference
  - show: boolean
Returns Element

Const WireframeAnnotationNote

WireframeAnnotationNote(__namedParameters: { annotation: WireframeAnnotation; isHighlighted: boolean; parentReference: ParentReference }): Element

- Defined in packages/react-wireframes/src/WireframeAnnotationNotes/WireframeAnnotationNote.tsx:50
Parameters
- __namedParameters: { annotation: WireframeAnnotation; isHighlighted: boolean; parentReference: ParentReference }
  - annotation: WireframeAnnotation
  - isHighlighted: boolean
  - parentReference: ParentReference
Returns Element

Const WireframeAnnotationNotes

WireframeAnnotationNotes(__namedParameters: { annotations: WireframeAnnotations; className: string; highlightedNote: WireframeAnnotation; parentReference: ParentReference }): Element

- Defined in packages/react-wireframes/src/WireframeAnnotationNotes/WireframeAnnotationNotes.tsx:51
Parameters
- __namedParameters: { annotations: WireframeAnnotations; className: string; highlightedNote: WireframeAnnotation; parentReference: ParentReference }
  - annotations: WireframeAnnotations
  - className: string
  - highlightedNote: WireframeAnnotation
  - parentReference: ParentReference
Returns Element

Const WireframeAnnotationPropsInterfaceDefinition

WireframeAnnotationPropsInterfaceDefinition(__namedParameters: { isHighlighted: boolean; outline: boolean }): any

- Defined in packages/react-wireframes/src/withWireframeAnnotation/withWireframeAnnotation.tsx:129
Type parameters
- P: Record<string, unknown>
Parameters
- __namedParameters: { isHighlighted: boolean; outline: boolean }
 - isHighlighted: boolean
 - outline: boolean
Returns any

Const WireframeContainer

WireframeContainer(__namedParameters: { children: ReactNode; className: string; defaultOpen: boolean; fixed: boolean; onHighlightAnnotation: (wireframeAnnotation: WireframeAnnotation, element: Element) => void; onToggleOpen: (isOpen: boolean) => void; open: boolean }): Element

- Defined in packages/react-wireframes/src/WireframeContainer/WireframeContainer.tsx:221
Use the WireframeContainer at the top of your component tree

Parameters
- __namedParameters: { children: ReactNode; className: string; defaultOpen: boolean; fixed: boolean; onHighlightAnnotation: (wireframeAnnotation: WireframeAnnotation, element: Element) => void; onToggleOpen: (isOpen: boolean) => void; open: boolean }
  - children: ReactNode
  - className: string
  - defaultOpen: boolean
  - fixed: boolean
  - onHighlightAnnotation: (wireframeAnnotation: WireframeAnnotation, element: Element) => void
    - - (wireframeAnnotation: WireframeAnnotation, element: Element): void
      - Parameters
        
        wireframeAnnotation: WireframeAnnotation
        
        element: Element
        
        Returns void
  - onToggleOpen: (isOpen: boolean) => void
    - - (isOpen: boolean): void
      - Parameters
        
        isOpen: boolean
        
        Returns void
  - open: boolean
Returns Element

Const WireframeProvider

WireframeProvider(__namedParameters: { children: string | number | false | true | {} | ReactElement<any, string | ((props: P) => ReactElement | null) | {}> | ReactNodeArray | ReactPortal | ReactNode[] }): string | number | false | true | {} | ReactElement<any, string | ((props: P) => ReactElement | null) | {}> | ReactNodeArray | ReactPortal | ReactNode[]
WireframeProvider(__namedParameters: { api: WireframeAnnotationAPI; children: ReactNode }): Element

- Defined in packages/react-wireframes/src/WireframeContainer/WireframeContainer.noop.ts:10
Parameters
- __namedParameters: { children: string | number | false | true | {} | ReactElement<any, string | ((props: P) => ReactElement | null) | {}> | ReactNodeArray | ReactPortal | ReactNode[] }
 - children: string | number | false | true | {} | ReactElement<any, string | ((props: P) => ReactElement | null) | {}> | ReactNodeArray | ReactPortal | ReactNode[]
Returns string | number | false | true | {} | ReactElement<any, string | ((props: P) => ReactElement | null) | {}> | ReactNodeArray | ReactPortal | ReactNode[]
- Defined in packages/react-wireframes/src/WireframeProvider.tsx:21
Parameters
- __namedParameters: { api: WireframeAnnotationAPI; children: ReactNode }
  - api: WireframeAnnotationAPI
  - children: ReactNode
Returns Element

Const getDisplayName

getDisplayName(WrappedComponent: ComponentType<any> | string): string

- Defined in packages/react-wireframes/src/withWireframeAnnotation/withWireframeAnnotation.tsx:55
Parameters
- WrappedComponent: ComponentType<any> | string
Returns string

Const getParentId

getParentId(parent?: ParentReference): number[] | undefined

- Defined in packages/react-wireframes/src/components/Identifier.tsx:50
Parameters
- Optional parent: ParentReference
Returns number[] | undefined

Const getWireframeAnnotation

getWireframeAnnotation(annotations: WireframeAnnotations, Component: ComponentType<any> | undefined): WireframeAnnotation | undefined

- Defined in packages/react-wireframes/src/utils.ts:5
Parameters
- annotations: WireframeAnnotations
- Component: ComponentType<any> | undefined
Returns WireframeAnnotation | undefined

Const updateWireframeAnnotation

updateWireframeAnnotation(annotations: WireframeAnnotations, wireFrameAnnotation: WireframeAnnotation, updatedWireframeAnnotation: WireframeAnnotation): WireframeAnnotations

- Defined in packages/react-wireframes/src/utils.ts:10
Parameters
- annotations: WireframeAnnotations
- wireFrameAnnotation: WireframeAnnotation
- updatedWireframeAnnotation: WireframeAnnotation
Returns WireframeAnnotations

Const useApi

useApi(): WireframeAnnotationAPI

- Defined in packages/react-wireframes/src/useApi.ts:11
Returns WireframeAnnotationAPI

useLocalStorage

useLocalStorage(key: string, initial?: P | undefined): [P | undefined, (newValue: P | undefined) => void]

- Defined in packages/react-wireframes/src/useLocalStorage.ts:3
Type parameters
- P
Parameters
- key: string
- Optional initial: P | undefined
Returns [P | undefined, (newValue: P | undefined) => void]

useScrollElementIntoView

useScrollElementIntoView<T>(__namedParameters: { boundary: HTMLElement; element: HTMLElement; onScrollIntoView: (el: HTMLElement) => void }): void

- Defined in packages/react-wireframes/src/useScrollElementIntoView.ts:10
Type parameters
- T: Element
Parameters
- __namedParameters: { boundary: HTMLElement; element: HTMLElement; onScrollIntoView: (el: HTMLElement) => void }
  - boundary: HTMLElement
  - element: HTMLElement
  - onScrollIntoView: (el: HTMLElement) => void
    - - (el: HTMLElement): void
      - Parameters
        
        el: HTMLElement
        
        Returns void
Returns void

Const withWireframeAnnotation

withWireframeAnnotation(options: WireframeAnnotationOptions): withWireframeAnnotationComponent
withWireframeAnnotation(WrappedComponent: ComponentType | string): string | ComponentClass<P, any> | FunctionComponent

- Defined in packages/react-wireframes/src/withWireframeAnnotation/withWireframeAnnotation.tsx:57
Parameters
- options: WireframeAnnotationOptions
Returns withWireframeAnnotationComponent
- Defined in packages/react-wireframes/src/withWireframeAnnotation/withWireframeAnnotation.noop.ts:10
Type parameters
- P
Parameters
- WrappedComponent: ComponentType | string
Returns string | ComponentClass<P, any> | FunctionComponent

Const withWireframeAnnotationInterfaceDefinition

withWireframeAnnotationInterfaceDefinition(params: { withWireframeAnnotation: (options: WireframeAnnotationOptions) => (WrappedComponent: ComponentType | keyof IntrinsicElements) => ReactElement<WireframeAnnotationProps> }): any

- Defined in packages/react-wireframes/src/withWireframeAnnotation/withWireframeAnnotation.tsx:125
Parameters
- params: { withWireframeAnnotation: (options: WireframeAnnotationOptions) => (WrappedComponent: ComponentType | keyof IntrinsicElements) => ReactElement<WireframeAnnotationProps> }
 - withWireframeAnnotation: (options: WireframeAnnotationOptions) => (WrappedComponent: ComponentType | keyof IntrinsicElements) => ReactElement<WireframeAnnotationProps>
 - - (options: WireframeAnnotationOptions): (WrappedComponent: ComponentType | keyof IntrinsicElements) => ReactElement<WireframeAnnotationProps>
 - Parameters
 
 options: WireframeAnnotationOptions
 
 Returns (WrappedComponent: ComponentType | keyof IntrinsicElements) => ReactElement<WireframeAnnotationProps>
 
 (WrappedComponent: ComponentType | keyof IntrinsicElements): ReactElement<WireframeAnnotationProps>
 
 Type parameters
 
 P: Record<string, unknown>
 
 Parameters
 
 WrappedComponent: ComponentType | keyof IntrinsicElements
 
 Returns ReactElement<WireframeAnnotationProps>
Returns any

Index

Type aliases

Variables

Functions

Type aliases

APIOptions

Type declaration

Optional highlightNote?: (annotation?: WireframeAnnotation) => void

Parameters

Optional annotation: WireframeAnnotation

Returns void

updater: (annotations: WireframeAnnotations) => void

Parameters

annotations: WireframeAnnotations

Returns void

IdentifierProps

Type declaration

annotation: WireframeAnnotation

Optional parentReference?: ParentReference

Optional show?: boolean

OpenCallback

Type declaration

Parameters

isOpen: boolean

Returns void

ParentReference

Type declaration

api: WireframeAnnotationAPI

id: number

WireframeAnnotation

Type declaration

Component: ComponentType<any>

count: number

id: number

options: WireframeAnnotationOptions

WireframeAnnotationAPI

Type declaration

getAnnotations: () => WireframeAnnotations

Returns WireframeAnnotations

getParentReference: () => ParentReference | undefined

Returns ParentReference | undefined

highlightNote: (Component: ComponentType<any> | undefined) => void

Parameters

Component: ComponentType<any> | undefined

Returns void

isOpen: () => boolean

Returns boolean

onOpen: (cb: OpenCallback) => { unregister: () => void }

Parameters

cb: OpenCallback

Returns { unregister: () => void }

unregister: () => void

Returns void

register: (Component: ComponentType<any>, options: WireframeAnnotationOptions) => WireframeAnnotation

Parameters

Component: ComponentType<any>

options: WireframeAnnotationOptions

Returns WireframeAnnotation

setOpen: (isOpen: boolean) => boolean

Parameters

isOpen: boolean

Returns boolean

setOptions: (options: APIOptions) => APIOptions

Parameters

options: APIOptions

Returns APIOptions

setParentReference: (parentReference: ParentReference) => void

Parameters

parentReference: ParentReference

Returns void

unregister: (Component: ComponentType<any>) => void

Parameters

Component: ComponentType<any>

Returns void

WireframeAnnotationOptions

Type declaration

description: ReactNode

title: ReactNode

WireframeAnnotationProps

Type declaration