react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
251 lines (250 loc) • 8.2 kB
JSON
{
"name": "Hint",
"category": "overlays",
"description": "Hint component for displaying a tooltip over wrapped component",
"note": "You can either wrap a component or pass a specific targetFrame",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"
],
"props": [
{
"name": "visible",
"type": "boolean",
"description": "Control the visibility of the hint"
},
{
"name": "color",
"type": "string",
"description": "The hint background color"
},
{
"name": "message",
"type": "string | ReactElement",
"description": "The hint message"
},
{
"name": "messageStyle",
"type": "TextStyle",
"description": "The hint message custom style"
},
{
"name": "icon",
"type": "ImageSourcePropType",
"description": "Icon to show next to the hint's message"
},
{
"name": "iconStyle",
"type": "ImageStyle",
"description": "The icon's style"
},
{
"name": "position",
"type": "TOP | BOTTOM",
"description": "The hint's position",
"default": "HintPositions.BOTTOM"
},
{
"name": "targetFrame",
"type": "{x?: number, y?: number, width?: number, height?: number}",
"description": "Provide custom target position instead of wrapping a child"
},
{
"name": "useModal",
"type": "boolean",
"description": "Open the hint using a Modal component"
},
{
"name": "useSideTip",
"type": "boolean",
"description": "Show side tips instead of the middle tip"
},
{
"name": "borderRadius",
"type": "number",
"description": "The hint's border radius"
},
{
"name": "edgeMargins",
"type": "number",
"description": "Hint margins from screen edges"
},
{
"name": "offset",
"type": "number",
"description": "Hint offset from target"
},
{
"name": "onPress",
"type": "() => void",
"description": "Callback for Hint press"
},
{
"name": "onBackgroundPress",
"type": "(event: GestureResponderEvent) => void",
"description": "Callback for the background press"
},
{
"name": "backdropColor",
"type": "string",
"description": "Color for background overlay (require onBackgroundPress)"
},
{
"name": "containerWidth",
"type": "number",
"description": "The hint container width"
},
{
"name": "customContent",
"type": "JSX.Element",
"description": "Custom content element to render inside the hint container"
},
{
"name": "removePaddings",
"type": "boolean",
"description": "Remove all hint's paddings"
},
{
"name": "enableShadow",
"type": "boolean",
"description": "Enable shadow (for hint with white background only)"
},
{
"name": "testID",
"type": "string",
"description": "The hint's test identifier"
},
{
"name": "style",
"type": "ViewStyle",
"description": "Additional styling"
}
],
"snippet": [
"<Hint visible={isVisible$1} message={'Message goes here'$2} color={Colors.red30$3} onBackgroundPress={() => setVisible(false)$4}>",
" <Text>Text to hint</Text>",
"</Hint>"
],
"docs": {
"hero": {
"title": "Hint",
"description": "A hint is used to draw the user’s attention to a specific part of the interface, providing information or encouraging them to take action.\nHints are typically triggered automatically at the right moment in the user journey but can also appear in response to user actions.\n\nThe hint should disappear when the user taps anywhere on the screen.",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_cover.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Usage Examples",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_usage.png"
}
]
},
{
"type": "table",
"columns": [
"Alignment",
"Top",
"Bottom"
],
"items": [
{
"title": "Left",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_top.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_bottom.png"
}
]
},
{
"title": "Center",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_top.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_bottom.png"
}
]
},
{
"title": "Right",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_top.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_bottom.png"
}
]
}
],
"title": "Alignment",
"description": "The Hint component supports different alignments, so it works well with elements anywhere on the screen."
},
{
"type": "table",
"columns": [
"Prop",
"Preview"
],
"items": [
{
"title": "None",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_none.png"
}
]
},
{
"title": "Icon",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_icon.png"
}
]
}
],
"title": "Accessories"
},
{
"type": "section",
"title": "Position",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_position.png"
}
],
"description": "markdown:\nDistance \nKeep a distance of S2 from the component the hint is pointing at."
},
{
"type": "section",
"title": "Spec",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_spec.png"
}
],
"description": "markdown:\nThe Hint component adjusts to its content. \nMax width: screen width, S4 margins."
}
]
}
]
}
}