use-pluggy-connect

React hook to integrate Pluggy Connect.

Install

npm install --save use-pluggy-connect

or

pnpm install --save use-pluggy-connect

or

yarn add use-pluggy-connect

or

bun install --save use-pluggy-connect

Usage

React

import React, { useCallback } from 'react'

import usePluggyConnect from 'use-pluggy-connect'

const App = () => {
  const handleEvent = useCallback((payload) => {
    console.log(`[Event]: ${payload}`)
  }, [])

  const { init, error, ready } = usePluggyConnect({
    url: 'https://connect.pluggy.dev',
    connectToken: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IJ9...',
    onEvent: handleEvent,
  })

  if (!ready) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error: {error.message}</div>
  }
  return (
    <div>
      <button onClick={init}>Init</button>
    </div>
  )
}
export default App

Nextjs

'use client'

import usePluggyConnect from 'use-pluggy-connect'

export default function OpenPluggyButton() {
  const { init } = usePluggyConnect({
    connectToken:
      '...',
  })

  return <button onClick={init}>Open Pluggy</button>
}

Configurations

usePluggyConnect accepts all PluggyConnectProps from pluggy-connect-sdk. Notable options:

Property	Description	Type	Default
connectToken	Your Pluggy Connect token (required).	string	N/A
connectorSortAlphabetically	If set to true, connectors will be sorted alphabetically (A-Z) instead of by usage.	boolean	false
onSuccess	Called when an Item has been created/updated successfully.	(data: { item: Item }) => void	No op
onError	Called on errors.	(error: { message: string }) => void	No op
onEvent	Called for specific user interaction events.	(payload: ConnectEventPayload) => void	No op

TODOS:

• Add tests
• Improve examples