Wondering what’s next for npm?Check out our public roadmap! »

@mono.co/connect-react-native
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

@mono.co/connect-react-native

This package make it easy to use the Mono connect widget in a react native project.

Request access here to get your API keys

Installation

using NPM.

npm install @mono.co/connect-react-native

using yarn.

yarn add @mono.co/connect-react-native

also install react-native-webview because it's a peer dependency for this package.

Usage

Hooks

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { MonoProvider, useMonoConnect } from '@mono.co/connect-react-native';

const config = {
  publicKey: "YOUR_MONO_PUBLIC_KEY_HERE",
  onClose: () => alert('Widget closed'),
  onSuccess: (data) => {
    const code = data.getAuthCode()
    console.log("Access code", code)
  }
}

function LinkAccount() {
  const { init } = useMonoConnect()

  return (
    <View style={{marginBottom: 10}}>
      <TouchableOpacity onPress={() => init()}>
        <Text style={{color: 'blue'}}>Link your bank account</Text>
      </TouchableOpacity>
    </View>
  )
}

function ReauthoriseUserAccount({reauth_token}) {
  const { reauthorise } = useMonoConnect()

  return (
    <View style={{marginBottom: 10}}>
      <TouchableOpacity onPress={() => reauthorise(reauth_token)}>
        <Text style={{color: 'blue'}}>Reauthorise user account</Text>
      </TouchableOpacity>
    </View>
  )
}

export default function App() {
  const reauth_token = "code_xyz";

  return (
    <MonoProvider {...config}>
      <View style={styles.container}>
        <LinkAccount />
      </View>
      <ReauthoriseUserAccount reauth_token={reauth_token} />
    </MonoProvider>
  );
}

Components

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { MonoConnectButton, MonoProvider } from '@mono.co/connect-react-native';

const config = {
  publicKey: "YOUR_MONO_PUBLIC_KEY",
  onClose: () => alert('Widget closed'),
  onSuccess: (data) => console.log(data)
}

export default function App() {
  return (
    <MonoProvider {...config}>
      <View style={styles.container}>        
        <MonoConnectButton />
        <MonoConnectButton reauth_token="code_xyz" /> // for reauthorisation with MonoConnectButton
      </View>
    </MonoProvider>
  );
}

Check more examples here

NOTE.

Only public key is required, Check the types folder for all prop types.

Bugs and suggestions

Please file an issue for bugs or suggestions, both are welcomed.

Install

npm i @mono.co/connect-react-native

DownloadsWeekly Downloads

17

Version

0.1.2

License

ISC

Unpacked Size

22.9 kB

Total Files

15

Last publish

Collaborators

  • avatar
  • avatar
  • avatar