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
yarn install @madfi/widgets-react
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
- Install deps
nvm use
pnpm install
- Create a symlink in this directory
yarn link
- Build the app in watch mode
yarn watch:ts
- Install in your project + use the symlink
yarn install @madfi/widgets-react
yarn link "@madfi/widgets-react"
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>
)
}