# @daohaus/moloch-v3-hooks

> The moloch-v3-hooks pakage is a collection of react hooks you can use fetch and store data and the use it in components anywhere in your application, like:

Latest version **0.5.5** (published 2025-03-03) · 0 weekly downloads

## Install

```sh
npm install @daohaus/moloch-v3-hooks
pnpm add @daohaus/moloch-v3-hooks
yarn add @daohaus/moloch-v3-hooks
bun add @daohaus/moloch-v3-hooks
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2025-03-03 |
| First published | 2023-02-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 174.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Maintainers | daohaus-protocol |

## Links

- npm: https://www.npmjs.com/package/@daohaus/moloch-v3-hooks
- Repository: https://github.com/HausDAO/monorepo
- Homepage: https://github.com/HausDAO/monorepo#readme
- Issues: https://github.com/HausDAO/monorepo/issues
- npm.io page: https://npm.io/package/@daohaus/moloch-v3-hooks

## Dependencies (7)

- [react](https://npm.io/package/react.md) 18.2.0
- [@daohaus/abis](https://npm.io/package/@daohaus/abis.md) 0.5.5
- [@daohaus/utils](https://npm.io/package/@daohaus/utils.md) 0.5.5
- [@daohaus/profile-data](https://npm.io/package/@daohaus/profile-data.md) 0.5.5
- [@daohaus/keychain-utils](https://npm.io/package/@daohaus/keychain-utils.md) 0.5.5
- [@daohaus/moloch-v3-data](https://npm.io/package/@daohaus/moloch-v3-data.md) 0.5.5
- [@daohaus/data-fetch-utils](https://npm.io/package/@daohaus/data-fetch-utils.md) 0.5.5

## Recent versions

- 0.5.5 (latest) — 2025-03-03
- 0.2.0-alpha.6 (alpha) — 2023-08-18
- 0.5.4 — 2024-10-29
- 0.5.3 — 2024-09-06
- 0.5.2 — 2024-06-14
- 0.5.1 — 2024-05-09
- 0.5.0 — 2024-05-03
- 0.4.5 — 2024-05-02
- 0.4.4 — 2024-03-29
- 0.4.3 — 2024-03-21
- 0.4.2 — 2024-01-26
- 0.4.1 — 2024-01-18
- 0.4.0 — 2024-01-17
- 0.3.3 — 2023-12-19
- 0.3.2 — 2023-11-10
- … 26 more at https://npm.io/package/@daohaus/moloch-v3-hooks/versions

## README

# @daohaus/moloch-v3-hooks

The moloch-v3-hooks pakage is a collection of react hooks you can use fetch and store data and the use it in components anywhere in your application, like:

- Current dao data (including proposals, members, vaults and dao records)
- Current connected address membership data
- ERC20 data

### [View on NPM](https://www.npmjs.com/package/@daohaus/moloch-v3-hooks)

## Usage

### Installation

```bash
yarn add @daohaus/moloch-v3-hooks
```

### Requirements

If you are trying to query for data on Etheruem Mainnet or Gnosis Chain (and more to come) you will need to provide an api Key from The Graph. Learn to get those [here](https://thegraph.com/docs/en/querying/managing-api-keys/) and [here](https://thegraph.com/studio/apikeys/).

These hooks use [React-Query](https://tanstack.com/query/v3/) so you will need to wrap your app in a QueryClientProvider as seen [here](https://tanstack.com/query/v3/docs/react/examples/react/basic)

```jsx
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
      <QueryClientProvider client={queryClient}>
        <HausThemeProvider>
          <Routes />
        </HausThemeProvider>
      </QueryClientProvider>
    </HashRouter>
  </React.StrictMode>
);
```

### Examples

**How to get DAO data**

```jsx
import { useDaoData, useDaoMember, useDaoProposals } from '@daohaus/moloch-v3-hooks';

const { dao } = useDaoData({
  daoChain: '0x1',
  daoId '0x0someAddress'
});

const { member } = useDaoMember({
  daoChain: '0x1',
  daoId '0x0someAddress',
  memberAddress: '0x0memberAddress',
});

const { proposals } = useDaoProposals({
  daoChain: '0x1',
  daoId '0x0someAddress',
});
```

**How to refetch data**

```jsx
import { useDaoData } from '@daohaus/moloch-v3-hooks';

const { dao, refetch } = useDaoData({
  daoChain: '0x1',
  daoId '0x0someAddress'
});

const someAction = () => {
  refetch();
}
```

**How tto filter, sort and paginate a list of proposals or members**

```jsx
import { useDaoProposals } from '@daohaus/moloch-v3-hooks';

const { proposals, filterProposals, filter, ordering, orderProposals, hasNextPage, fetchNextPage } = useDaoProposals({
  daoChain: '0x1',
  daoId '0x0someAddress',
});


//Filtering
console.log('current filter', filter)
// {}

const updateFilter = { cancelled: true }
filterProposals(updateFilter);
// proposals variable in the hook will be refetched updated


//Sorting
console.log('current ordering', ordering)
// {orderBy: 'createdAt', orderDirection: 'desc'}

const updatedOrdering = {
  orderBy: 'votingStarts',
  orderDiection: 'asc'
}

orderProposals(updatedOrdering)
// proposals variable in the hook will be refetched updated


//Getting the next page of data
console.log('does it have another page?', hasNextPage)
// true

fetchNextPage();
// proposal variable will have the next page of proposals added to it
```

**How to store the current DAO data**
If you store your target dao address and chain id in the CurrentDaoContext all of these hooks will not need yo to pass the daoId and chainId to them.

```jsx
import { CurrentDaoProvider } from '@daohaus/moloch-v3-hooks';

<CurrentDaoProvider
  targetDao={{
    daoChain,
    daoId,
  }}
>
  {children}
</CurrentDaoProvider>;
```

Then in a component you can use this hook:

```jsx
import { UseCurrentDao, useDaoData } from '@daohaus/moloch-v3-hooks';


const { daoChain, daoId } = useCurrentDao();
const { useDaoData } = useDaoData();

// instead of

const { useDaoData } = useDaoData({daoId: 'someid' daoChain: 'somechainid'});
```

## Building

Run `nx run moloch-v3-hooks:build` to build the library.

---
_Source: https://npm.io/package/@daohaus/moloch-v3-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._