@lens-protocol/react-web

Lens React Web SDK

The official Lens Protocol React bindings for web applications.

This package enables you to build web applications on top of the Lens Protocol using React.

Documentation

• GitHub monorepo
• Getting Started
• Reference

Quick start

Install the Lens React Web SDK package using your package manager of choice:

Package Manager	Command
npm	npm install @lens-protocol/react-web@latest
yarn	yarn add @lens-protocol/react-web@latest
pnpm	pnpm add @lens-protocol/react-web@latest

In the following examples we will show you integration with Wagmi and we will explain later how to integrate other libraries via custom bindings.

Install the Lens Wagmi bindings package and its peer dependencies.

Package Manager	Command
npm	npm install viem@2 wagmi@2 @tanstack/react-query@5 @lens-protocol/wagmi@latest
yarn	yarn add viem@2 viem@2 wagmi@2 @tanstack/react-query@5 @lens-protocol/wagmi@latest
pnpm	pnpm add viem@2 viem@2 wagmi@2 @tanstack/react-query@5 @lens-protocol/wagmi@latest

Follow the Wagmi documentation to create the Wagmi configuration.

import { createConfig, http } from 'wagmi';
import { polygon } from 'wagmi/chains';

const wagmiConfig = createConfig({
  chains: [polygon],
  transports: {
    [polygon.id]: http(),
  },
});

Next, use this configuration with the bindings from the @lens-protocol/wagmi package to generate the LensConfig object.

import { LensConfig, production } from '@lens-protocol/react-web';
import { bindings } from '@lens-protocol/wagmi';

const lensConfig: LensConfig = {
  environment: production,
  bindings: bindings(wagmiConfig),
};

Now, wrap your app with the <LensProvider> component and pass the LensConfig object you created earlier.

import { LensProvider } from '@lens-protocol/react-web';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <LensProvider config={lensConfig}>
          <YourApp />
        </LensProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Custom bindings

You can create custom bindings for your own Signer and Provider by implementing the {@link IBindings} interface.

An example of how to create custom bindings for a Wallet from ethers.js

import { InfuraProvider, Wallet } from 'ethers';
import { IBindings } from '@lens-protocol/react-web';

const provider = new providers.InfuraProvider('maticmum');
const wallet = new Wallet('<your-private-key>', provider);

const bindings: IBindings = {
  getProvider: () => provider,
  getSigner: () => wallet,
};

Troubleshooting

These are some common issues you may run into while using @lens-protocol/react. If you encounter something not listed here try searching for GitHub issues.

Next.js build failing

You might see your Next.js failing with an error like this:

Error: Directory import '[...]/node_modules/@apollo/client/link/context' is not supported resolving ES modules imported from [...]/node_modules/@lens-protocol/api-bindings/dist/index.js
Did you mean to import @apollo/client/link/context/context.cjs?

The root cause is the lack of ESM support from Apollo Client which manifests itself when imported as sub-dependency of @lens-protocol/api-bindings (which in turn is imported by @lens-protocol/react). See open Apollo Client issue.

To fix it you need to edit you next.config.js so to make sure the Lens SDK and its sub-dependencies a transpiled by Next.js build pipeline.

const nextConfig = {
  transpilePackages: ['@lens-protocol'],
};

For further details on how to integrate Lens SDK with a Next.js app, there is a working Next.js example in this monorepo: https://github.com/lens-protocol/lens-sdk/tree/main/examples/nextjs