You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-native-walkthrough-tooltip

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-walkthrough-tooltip - npm Package Compare versions

Comparing version

0.6.0
to
0.6.1

2

package.json
{
"name": "react-native-walkthrough-tooltip",
"version": "0.6.0",
"version": "0.6.1",
"description": "An inline wrapper for calling out React Native components via tooltip",

@@ -5,0 +5,0 @@ "main": "src/tooltip.js",

12

README.md

@@ -91,12 +91,12 @@ # React Native Walkthrough Tooltip [![npm](https://img.shields.io/npm/v/react-native-walkthrough-tooltip.svg)](https://www.npmjs.com/package/react-native-walkthrough-tooltip) [![npm](https://img.shields.io/npm/dm/react-native-walkthrough-tooltip.svg)](https://www.npmjs.com/package/react-native-walkthrough-tooltip)

### TooltipChildrenConsumer
### TooltipChildrenContext
[React Context](https://reactjs.org/docs/context.html) consumer that can be used to distinguish "real" children rendered inside parent's layout from their copies rendered inside tooltip's modal. The duplicate child rendered in the tooltip modal is wrapped in a Context.Provider which provides object with prop `tooltipDuplicate` set to `true`, so informed decisions may be made, if necessary, based on where the child rendered.
[React Context](https://reactjs.org/docs/context.html) that can be used to distinguish "real" children rendered inside parent's layout from their copies rendered inside tooltip's modal. The duplicate child rendered in the tooltip modal is wrapped in a Context.Provider which provides object with prop `tooltipDuplicate` set to `true`, so informed decisions may be made, if necessary, based on where the child rendered.
```js
import Tooltip, { TooltipChildrenConsumer } from 'react-native-walkthrough-tooltip';
import Tooltip, { TooltipChildrenContext } from 'react-native-walkthrough-tooltip';
...
<Tooltip withContext>
<Tooltip>
<ComponentA />
<ComponentB>
<TooltipChildrenConsumer>
<TooltipChildrenContext.Consumer>
{({ tooltipDuplicate }) => (

@@ -106,5 +106,5 @@ // will only assign a ref to the original component

)}
</WalkthroughConsumer>
</TooltipChildrenContext.Consumer>
</ComponentB>
</Tooltip>
```

8

src/tooltip.d.ts

@@ -92,5 +92,5 @@ // Type definitions for react-native-walkthrough-tooltip 0.5.3

// Usage Example
import Tooltip, { TooltipChildrenConsumer } from 'react-native-walkthrough-tooltip';
import Tooltip, { TooltipChildrenContext } from 'react-native-walkthrough-tooltip';
<Tooltip>
<TooltipChildrenConsumer>
<TooltipChildrenContext.Consumer>
{({ tooltipDuplicate }) => (

@@ -101,7 +101,7 @@ <ScrollView scrollEnabled={!tooltipDuplicate}>

)}
</TooltipChildrenConsumer>
</TooltipChildrenContext.Consumer>
</Tooltip>
```
*/
export const TooltipChildrenConsumer: React.Consumer<{ tooltipDuplicate: boolean }>;
export const TooltipChildrenContext: React.Context<{ tooltipDuplicate: boolean }>;

@@ -108,0 +108,0 @@ /**

9

src/tooltip.js

@@ -25,2 +25,4 @@ import React, { Component } from 'react';

export { TooltipChildrenContext };
const SCREEN_HEIGHT = Dimensions.get('window').height;

@@ -47,5 +49,2 @@ const SCREEN_WIDTH = Dimensions.get('window').width;

const TooltipChildrenProvider = TooltipChildrenContext.Provider;
export const TooltipChildrenConsumer = TooltipChildrenContext.Consumer;
class Tooltip extends Component {

@@ -532,5 +531,5 @@ static defaultProps = {

>
<TooltipChildrenProvider value={{ tooltipDuplicate: true }}>
<TooltipChildrenContext.Provider value={{ tooltipDuplicate: true }}>
{children}
</TooltipChildrenProvider>
</TooltipChildrenContext.Provider>
</View>

@@ -537,0 +536,0 @@ );