https://github.com/lawnstarter/react-native-hotspot

🎯 A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements
https://github.com/lawnstarter/react-native-hotspot

frontend hotspot react react-native

Last synced: about 1 month ago
JSON representation

🎯 A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

• Host: GitHub
• URL: https://github.com/lawnstarter/react-native-hotspot
• Owner: lawnstarter
• License: mit
• Created: 2018-05-14T14:06:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-05T18:52:09.000Z (about 1 month ago)
• Last Synced: 2024-11-05T23:43:06.368Z (about 1 month ago)
• Topics: frontend, hotspot, react, react-native
• Language: JavaScript
• Homepage:
• Size: 2.07 MB
• Stars: 33
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-hotspot ★2 - A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements (Components / Navigation)
• awesome-react-native - react-native-hotspot ★2 - A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements (Components / Navigation)
• awesome-react-native - react-native-hotspot ★2 - A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements (Components / Navigation)
• awesome-react-native - react-native-hotspot ★2 - A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements (Components / Navigation)

README

        
# react-native-hotspot

[![npm version](https://badge.fury.io/js/react-native-hotspot.svg)](https://badge.fury.io/js/react-native-hotspot)

A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

![iOS Example](./example/ios-example.gif)

![Android Example](./example/android-example.gif)

[Examples](https://github.com/lawnstarter/react-native-hotspot/tree/master/example)

[Run example](https://snack.expo.io/@lfkwtz/react-native-hotspot)

## Getting Started

### Installing

`npm install react-native-hotspot`

### Using

```js

import { RNHotspot, RNHotspotHelper } from "react-native-hotspot";

// in your screen's constructor, use the helper with an array of onPress actions you want your hotspots to trigger

this.componentRefs = RNHotspotHelper([

    () => {

        // here you can drop in whatever action(s) you want to occur on tap of the hotspot.

        // you'll also likely want to use local storage here and/or an api call to mark each one as seen.

        Alert.alert(null, "This button does this thing.");

    },

    () => {

        Alert.alert(null, "This button does other thing.");

    }

]);

// drop the component below the outer wrapping parent of your screen

// expose the refs in the same order as the array defined above

 {}}

    ref={this.componentRefs[0].ref}

/>

 {}}

    ref={this.componentRefs[1].ref}

/>

```

## Testing

This component has been tested on React Native v0.57

## License

react-native-hotspot is [MIT licensed](https://github.com/lawnstarter/react-native-hotspot/tree/master/LICENSE) and built with :heart: in Austin, TX by the team at [LawnStarter](https://lawnstarter.com)