React

Get started with the Lens React SDK.

The Lens React SDK is a collection of React Hooks for both web and React Native applications. It's the simplest way to interact with the Lens API and build decentralized applications on Lens Protocol.

The Lens React SDK is actively being developed, with new features added regularly. To benefit from the latest improvements and features, we recommend always using the most recent version of the SDK.

Getting Started

To get started, follow the steps below.

Install SDK

First, install the @lens-protocol/react package using your package manager of choice.

npm install @lens-protocol/react@canary

Define Fragments

Next, define the structure of the data for the key entities in your application by creating GraphQL fragments that customize the data you retrieve.

This step is critical to keeping your queries efficient and focused, helping you avoid overfetching unnecessary data.

See the example below for a few common fragments.

import { UsernameFragment, graphql } from "@lens-protocol/react";
export const AccountMetadataFragment = graphql(  `    fragment AccountMetadata on AccountMetadata {      name      bio
      thumbnail: picture(        request: { preferTransform: { fixedSize: { height: 128, width: 128 } } }      )      picture    }  `,  [MediaImageFragment]);
export const AccountFragment = graphql(  `    fragment Account on Account {      __typename      username {        ...Username      }      address      metadata {        ...AccountMetadata      }    }  `,  [UsernameFragment, AccountMetadataFragment]);

Throughout this documentation, you’ll explore additional fragments and fields that you may want to tailor to your needs.

See the Custom Fragments best-practices guide for more information.

TypeScript Definitions

Then, create an index.ts where you extend the TypeScript definitions for the entities you are customizing.

fragments/index.tsimport type { FragmentOf } from "@lens-protocol/react";
import { AccountFragment, AccountMetadataFragment } from "./accounts";import { PostMetadataFragment } from "./posts";import { MediaImageFragment } from "./images";
declare module "@lens-protocol/react" {  export interface Account extends FragmentOf<typeof AccountFragment> {}  export interface AccountMetadata    extends FragmentOf<typeof AccountMetadataFragment> {}  export interface MediaImage extends FragmentOf<typeof MediaImageFragment> {}  export type PostMetadata = FragmentOf<typeof PostMetadataFragment>;}
export const fragments = [  AccountFragment,  PostMetadataFragment,  MediaImageFragment,];

Create a PublicClient

Next, create an instance of the PublicClient pointing to the desired environment.

import { PublicClient, mainnet } from "@lens-protocol/react";
import { fragments } from "./fragments";
export const client = PublicClient.create({  environment: mainnet,  fragments,});

Wrap Your App

Finally, wrap your app with the <LensProvider> component and pass the PublicClient instance you created in the previous step.

App.tsximport { LensProvider } from "@lens-protocol/react";
import { client } from "./client";
export function App() {  return (    <LensProvider config={client}>      {/* Your application components */}    </LensProvider>  );}

That's it—you're ready to use the Lens React SDK in your app.