@psychicdev/link

Psychic Link

@psychicdev/link is a React library that provides a hook for easy authentication with popular SaaS applications such as Notion, Google Drive, and more. Find us at https://psychic.dev

Table of Contents

• Installation
• Usage
• Troubleshooting

Installation

Install the library using npm:

npm install @psychicdev/link

Usage

Here's an example of how to use the library:

import React, { useEffect, useState } from 'react';
import { usePsychicLink } from '@psychicdev/link';

const App = () => {
  const [newConnection, setNewConnection] = useState(null);
  // Your Psychic.dev public API key
  const publicKey = '5c362fda-bb72-4a6c-b930-71f33ad45f79';
  
  // Unique ID for this connection
  const connectionId = '2cbaa840-0b21-4d8e-924c-e418a08ce53f';

  // usePsychicLink accepts a callback that handles your application logic once a new connection is established
  const { open, isReady, isLoading, error } = usePsychicLink(publicKey, (newConnection: string) => setNewConnection(newConnection));

  useEffect(() => {
    // Shows the Psychic Link modal to the user
    open(connectionId);
  }, []);

  return (
    <div className="App">
      {newConnection && <div>{newConnection}</div>}
    </div>
  );
};

export default App;

Troubleshooting

For assistance, join the Psychic community Slack here

Invalid Hook Call Warning

If you encounter an "Invalid hook call" warning when importing the library into another project, it might be caused by the library using a different version of React than the project. To resolve this issue, follow the instructions provided in this StackOverflow post: Invalid hook call warning - linking a React app and a local npm package