0.40.0 • Published 7 months ago

@fuels/react v0.40.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
7 months ago

discord

⚡️ Fuel Wallet React Hooks

The Fuel Wallet React Hooks provide a set of hooks to seamless integrate the Fuel Wallet browser extension with any React JS or Next JS project.

Installation

npm install fuels @fuel-wallet/react

Note that the fuels package is also required as a dependency for better integration with other applications built using the Fuels TS SDK.

Usage

Setup the provider

Adding the providers on the upper level of the application that will use the hooks.

import { FuelProvider } from '@fuel-wallet/react';

import { App } from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <FuelProvider>
      <App />
    </FuelProvider>
  </React.StrictMode>,
);

Connecting to Wallet

import { useState } from 'react';
import {
  useConnect,
  useConnectors,
  useDisconnect,
  useIsConnected,
} from '@fuel-wallet/react';

export default function App() {
  const [connector, setConnector] = useState('');
  const { connectors } = useConnectors();
  const { connect } = useConnect();
  const { disconnect } = useDisconnect();
  const { isConnected } = useIsConnected();

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        padding: 10,
        maxWidth: 300,
      }}
    >
      <select
        onChange={(e) => {
          console.log(e.target.value);
          setConnector(e.target.value);
        }}
      >
        <option value="">Select a connector</option>
        {connectors.map((c) => (
          <option key={c.name} value={c.name}>
            {c.name}
          </option>
        ))}
      </select>
      <button disabled={!connector} onClick={() => connect(connector)}>
        Connect to {connector}
      </button>
      <button disabled={!connector} onClick={() => disconnect()}>
        Disconnect from {connector}
      </button>
      <p>{isConnected ? 'Connected' : ''}</p>
    </div>
  );
}

Please visit our docs to get started using the Fuel Wallet React Hooks.

Additionally, you can check up the Fuel Wallet React Hooks reference for more details.

📜 License

This repo is licensed under the Apache-2.0 license. See LICENSE for more information.

0.38.0-main-c75981c

12 months ago

0.41.1

8 months ago

0.41.2

8 months ago

0.41.0

9 months ago

0.42.0

8 months ago

0.43.1

7 months ago

0.43.2

7 months ago

0.37.0

1 year ago

0.38.0-main-1896a80

12 months ago

0.39.0-main-b21855f

11 months ago

0.38.1

12 months ago

0.38.0

12 months ago

0.38.0-main-71256d8

12 months ago

0.39.1

10 months ago

0.39.0

11 months ago

0.39.2

10 months ago

0.38.1-main-2d83af7

12 months ago

0.39.1-main-455dacb

11 months ago

0.40.0

9 months ago

0.39.0-main-5f9794e

11 months ago

0.36.1

1 year ago

0.36.0

1 year ago

0.32.0

1 year ago

0.29.0

1 year ago

0.29.6

1 year ago

0.29.5

1 year ago

0.29.4

1 year ago

0.29.3

1 year ago

0.29.2

1 year ago

0.29.1

1 year ago

0.33.0

1 year ago

0.30.1

1 year ago

0.30.0

1 year ago

0.31.6

1 year ago

0.31.5

1 year ago

0.31.4

1 year ago

0.31.3

1 year ago

0.31.2

1 year ago

0.31.1

1 year ago

0.31.0

1 year ago

0.34.2

1 year ago

0.34.1

1 year ago

0.34.0

1 year ago

0.35.1

1 year ago

0.35.0

1 year ago

0.28.1

1 year ago

0.28.0

1 year ago

0.27.1

1 year ago

0.27.0

1 year ago

0.26.0

1 year ago

0.20.0

2 years ago

0.25.0

1 year ago

0.23.0

2 years ago

0.21.0

2 years ago

0.24.0

1 year ago

0.22.0

2 years ago

0.19.0

2 years ago

0.18.1

2 years ago

0.18.0

2 years ago

0.17.0

2 years ago

0.16.0

2 years ago

0.15.3

2 years ago

0.15.2

2 years ago

0.15.1

2 years ago