Package Exports

@linagee/lnr-ethers-react
@linagee/lnr-ethers-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@linagee/lnr-ethers-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lnr Ethers React

npm npm bundle size npm

GitHub GitHub pull requests

Requirements

React >= 18.0.0

Installation

Full documentation can be found here docs.linagee.app

# with npm
npm install @linagee/lnr-ethers-react

# with yarn
yarn add @linagee/lnr-ethers-react

Setup

Set LnrConfigProvider as a wrapper for your app

Example:

import { AppProps } from 'next/app';
import { ethers } from 'ethers';
import { LnrConfigProvider } from '@linagee/lnr-ethers-react';

function MyApp({ Component, pageProps }: AppProps) {
    const config = {
        provider: new ethers.providers.AlchemyProvider(1, process.env.REACT_APP_ALCHEMY_API
        ),
    };

    return (
        <LnrConfigProvider config={config}>
            <Component {...pageProps} />
        </LnrConfigProvider>
    );
}

export default MyApp;

You need to set REACT_APP_ALCHEMY_API in your .env file. You can set any provider you want, but we recommend using Alchemy.

Usage

Use the hooks in your components to get the data you need.

Example:

import React from "react";
import { useLnrGetAddress } from "@linagee/lnr-ethers-react";

function MyComponent() {
  const name = "0xhal.og";
  const { address, error, hasError, loading } = useLnrGetAddress(name);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (hasError) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Address: {address}</p>
    </div>
  );
}

export default MyComponent;