# @nice1/react-tools

> Nice1 react tools =================

Latest version **0.3.4** (published 2025-12-08) · GPL3.0 license · 0 weekly downloads

## Install

```sh
npm install @nice1/react-tools
pnpm add @nice1/react-tools
yarn add @nice1/react-tools
bun add @nice1/react-tools
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.4 |
| Published | 2025-12-08 |
| First published | 2022-03-15 |
| Weekly downloads | 0 |
| License | GPL3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 67.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nice1 |
| Maintainers | proyectos.antonio.lopez, elboletaire, albertonice1 |

## Links

- npm: https://www.npmjs.com/package/@nice1/react-tools
- npm.io page: https://npm.io/package/@nice1/react-tools

## Dependencies (4)

- [anchor-link](https://npm.io/package/anchor-link.md) ^3.5.1
- [@greymass/eosio](https://npm.io/package/@greymass/eosio.md) ^0.6.4
- [eosio-signing-request](https://npm.io/package/eosio-signing-request.md) ^2.5.2
- [anchor-link-browser-transport](https://npm.io/package/anchor-link-browser-transport.md) ^3.5.1

## Recent versions

- 0.3.4 (latest) — 2025-12-08
- 0.3.3 — 2025-12-08
- 0.3.1 — 2025-12-08
- 0.3.0 — 2025-02-16
- 0.2.1 — 2023-06-05
- 0.2.0 — 2022-12-01
- 0.1.1 — 2022-06-01
- 0.1.0 — 2022-05-30
- 0.0.2 — 2022-04-25
- 0.0.1 — 2022-03-15

## README

Nice1 react tools
=================

React helper tools for using both nice1 and anchor wallet in your applications.

Installation
------------

~~~bash
yarn add @nice1/react-tools
# or
npm i @nice1/react-tools
~~~

Hooks
-----

These hooks can help you in the different parts of your app:

### useAnchor

With `useAnchor` you can easily login, logout, make blockchain calls and whatnot, with your anchor wallet:

~~~tsx
import { useAnchor } from '@nice1/react-tools'

const MyCoolComponent = () => {
  const { login, logout, session } = useAnchor()

  if (!session) {
    return <button onClick={login}>Login</button>
  }

  return (
    <>
      <p>Hi {session?.auth.actor} :)</p>
      <p>You can <button onClick={logout}>logout</button> whenever you want.</p>
    </>
  )
}
~~~

### useNice1

After you logged in using `useAnchor`, you can access and update nice1 info like your balance or profile information from our contracts:

~~~tsx
import { useAnchor, useNice1 } from '@nice1/react-tools'

const MyCoolComponent = () => {
  const { login, logout, session } = useAnchor()
  const { profile, balance } = useNice1()

  if (!session) {
    return <button onClick={login}>Login</button>
  }

  return (
    <>
      <p>Hi {session?.auth.actor} :)</p>
      <p>Your balance is {balance} and your a.k.a. is {profile.alias}.</p>
      <p>You also have defined a profile image as {profile.avatar}</p>
      <p>You can <button onClick={logout}>logout</button> whenever you want.</p>
    </>
  )
}
~~~


---

## **NFT Staking & Market Tools**  

### **useNftAtomicAssets**  
This hook retrieves and manages NFTs stored in **AtomicAssets**.

```tsx
import { useNftAtomicAssets } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsAA, updateNftsAA } = useNftAtomicAssets()

  return (
    <>
      <h2>Your NFTs (AtomicAssets):</h2>
      <ul>
        {nftsAA.map((nft) => (
          <li key={nft.asset_id}>
            Collection: {nft.collection_name}, Template: {nft.template_id}
          </li>
        ))}
      </ul>
      <button onClick={updateNftsAA}>Refresh NFTs</button>
    </>
  )
}
```

### **useNftAtomicMarket**  
This hook retrieves **NFTs listed for sale** in **AtomicMarket**.

```tsx
import { useNftAtomicMarket } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsAM, updateNftsAM } = useNftAtomicMarket()

  return (
    <>
      <h2>NFTs on AtomicMarket:</h2>
      <ul>
        {nftsAM.map((sale) => (
          <li key={sale.sale_id}>
            Seller: {sale.seller}, Price: {sale.listing_price}
          </li>
        ))}
      </ul>
      <button onClick={updateNftsAM}>Refresh Market</button>
    </>
  )
}
```

### **useNftSimpleAssets**  
This hook retrieves and manages NFTs stored in **SimpleAssets**.

```tsx
import { useNftSimpleAssets } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsSA, updateNfts } = useNftSimpleAssets()

  return (
    <>
      <h2>Your NFTs (SimpleAssets):</h2>
      <ul>
        {nftsSA.map((nft) => (
          <li key={nft.id}>
            Owner: {nft.owner}, Category: {nft.category}
          </li>
        ))}
      </ul>
      <button onClick={updateNfts}>Refresh NFTs</button>
    </>
  )
}
```

### **useNftSimpleMarket**  
This hook retrieves **NFTs listed for sale** in **SimpleMarket**.

```tsx
import { useNftSimpleMarket } from '@nice1/react-tools'

const MyComponent = () => {
  const { nftsSM, updateNfts } = useNftSimpleMarket()

  return (
    <>
      <h2>NFTs on SimpleMarket:</h2>
      <ul>
        {nftsSM.map((sale) => (
          <li key={sale.id}>
            Seller: {sale.owner}, Price: {sale.price}
          </li>
        ))}
      </ul>
      <button onClick={updateNfts}>Refresh Market</button>
    </>
  )
}
```

---

## **License**  
This project is licensed under **Apache 2.0**.  

---

---
_Source: https://npm.io/package/@nice1/react-tools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._