Lens Widgets React library

Dependencies

These packages must be installed in the root React app

• react
• react-dom
• tailwindcss
• @tanstack/react-query@^4.22.0

With @tanstack/react-query you have to follow their setup docs - and if using Next.js check this github issue for webpack setup

Installation

yarn install @madfi/widgets-react

With Next.js

If you are using Next.js pages directory please update your next.config.js with the following:

transpilePackages: ['@madfi/widgets-react'],

So the final configuration might look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: ['@madfi/widgets-react']
}
module.exports = nextConfig

Once this update is made, please re-run the server:

yarn watch:ts

Local Development

1. Install deps

nvm use
pnpm install

2. Create a symlink in this directory

yarn link

3. Build the app in watch mode

yarn watch:ts

4. Install in your project + use the symlink

yarn install @madfi/widgets-react
yarn link "@madfi/widgets-react"

With Next.js Dynamic Imports

Another option when working with Next.js pages directory apps is using a Dynamic Import:

/* Profile created in separate component */
import {
  Profile
} from '@madfi/widgets-react'

export default function ProfileComponent() {
  return (
    <Profile handle='lens/madfinance' />
  )
}

/* ProfileComponent imported using a dynamic import */
import dynamic from 'next/dynamic'
const ProfileComponent = dynamic(() => import('../components/ProfileComponent'), { ssr: false })

export default () => {
  return (
    <div>
      <ProfileComponent />
    </div>
  )
}