# nouns-builder-components

> React hooks and components for Nouns Builder DAOs

Latest version **0.2.0** (published 2023-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install nouns-builder-components
pnpm add nouns-builder-components
yarn add nouns-builder-components
bun add nouns-builder-components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-11-06 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | badublanc |
| Keywords | nouns, nouns builder, zora, builderdao, web3, ethereum, hooks, blockchain, cloudnouns |

## Links

- npm: https://www.npmjs.com/package/nouns-builder-components
- Repository: https://github.com/badublanc/nouns-builder-components
- Homepage: https://buildercomponents.wtf
- Issues: https://github.com/badublanc/nouns-builder-components/issues
- npm.io page: https://npm.io/package/nouns-builder-components

## Dependencies (7)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@zoralabs/zorb](https://npm.io/package/@zoralabs/zorb.md) ^0.1.0
- [use-prop-house](https://npm.io/package/use-prop-house.md) ^0.1.3
- [react-countdown](https://npm.io/package/react-countdown.md) ^2.3.5
- [react-responsive](https://npm.io/package/react-responsive.md) ^9.0.2
- [react-loading-skeleton](https://npm.io/package/react-loading-skeleton.md) ^3.1.0

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-11-06
- 0.1.3 — 2023-03-02
- 0.1.2 — 2023-02-27
- 0.1.1 — 2023-02-16
- 0.1.0 — 2023-02-15
- 0.0.6 — 2023-02-10
- 0.0.5 — 2023-02-07
- 0.0.4 — 2023-02-07
- 0.0.3 — 2023-02-06
- 0.0.2 — 2023-02-06
- 0.0.1 — 2023-02-06

## README

# Nouns Builder Components

Nouns Builder Components is a collection of reusable, lightly-styled React components designed for DAOs built with Nouns Builder. [Builder DAO](https://nouns.build/dao/0xdf9b7d26c8fc806b1ae6273684556761ff02d422/vote/0xbb6d9919efb59b500451dd8d923201d0a7bc1ced3a8320dd57888eef9ee3c139) funded the initial development of the library—with credit to [ripe0x](https://github.com/ripe0x) (design and development) and [badublanc](https://github.com/badublanc) (development).

> **Note**
>
> This library is for technical users. Check out the [easy-to-use builder](https://buildercomponents.wtf/) to embed the components without coding!

[Click here to preview all the components](https://buildercomponents.wtf/)!

---

## Installation

You can install the library and its peer dependencies with your favorite package manager.

```bash
# npm
npm i nouns-builder-components @rainbow-me/rainbowkit@latest wagmi viem

# yarn
yarn add nouns-builder-components @rainbow-me/rainbowkit@latest wagmi viem
```

## Setup

Once installed, import the `BuilderDAO` provider and component stylesheet. Wrap your application with `BuilderDAO`, `RainbowKitProvider`, and `WagmiConfig`. Instructions for setting up wagmi and RainbowKit are available in the [RainbowKit installation documentation](https://www.rainbowkit.com/docs/installation).

A working setup can be found on [CodeSanbox](https://codesandbox.io/s/builder-components-demo-zyfyd2?file=/src/index.js).

```jsx
// ...
import 'nouns-builder-components/index.css';
import { BuilderDAO } from 'nouns-builder-components';

// ...

export default function App() {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        {/* Purple Dao */}
        <BuilderDAO
          collection="0xa45662638E9f3bbb7A6FeCb4B17853B7ba0F3a60"
          chain="MAINNET"
        >
          <YourApp />
        </BuilderDAO>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}
```

## Usage

Now, import and use the desired components in your application.

```jsx
import { AuctionHero, CollectionList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return (
    <div className="App">
      <AuctionHero dao={dao} />
      <CollectionList dao={dao} />
    </div>
  );
}
```

See a working demo on [CodeSandbox](https://codesandbox.io/s/builder-components-demo-zyfyd2?file=/src/App.jsx).

---

## Components

Each component needs the `dao` prop, which you can get by with the `useDao` hook. Each component also accepts an `opts` prop: an object configuring the theme and other options.

Components include:

- AuctionHero
- CollectionList
- MemberList
- ProposalList
- Treasury
- PropHouseRounds
- PropHouseProps

### ⭐️ AuctionHero

**Options**

| key      | value                              |
| -------- | ---------------------------------- |
| `theme?` | `base` or `dark` - default: `base` |

**Example Usage**

```jsx
import { AuctionHero, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <AuctionHero dao={dao} opts={{ theme: 'base' }} />;
}
```

### ⭐️ CollectionList

**Options**

| key              | value                              |
| ---------------- | ---------------------------------- |
| `theme?`         | `base` or `dark` - default: `base` |
| `rows?`          | `number` - default: `3`            |
| `itemsPerRow?`   | `number` - default: `5`            |
| `sortDirection?` | `ASC` or `DESC` - default: `ASC`   |
| `hideLabels?`    | `boolean` - default: `true`        |

**Example Usage**

```jsx
import { CollectionList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <CollectionList dao={dao} opts={{ theme: 'dark', rows: 2 }} />;
}
```

### ⭐️ MemberList

**Options**

| key            | value                              |
| -------------- | ---------------------------------- |
| `theme?`       | `base` or `dark` - default: `base` |
| `rows?`        | `number` - default: `3`            |
| `itemsPerRow?` | `number` - default: `6`            |

**Example Usage**

```jsx
import { MemberList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <MemberList dao={dao} opts={{ rows: 5, itemsPerRow: 5 }} />;
}
```

### ⭐️ ProposalList

**Options**

| key              | value                              |
| ---------------- | ---------------------------------- |
| `theme?`         | `base` or `dark` - default: `base` |
| `sortDirection?` | `ASC` or `DESC` - default: `DESC`  |
| `max?`           | `number` - default: `10`           |

**Example Usage**

```jsx
import { ProposalList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <ProposalList dao={dao} opts={{ sortDirection: 'ASC', max: 5 }} />;
}
```

### ⭐️ Treasury

**Options**

| key      | value                              |
| -------- | ---------------------------------- |
| `theme?` | `base` or `dark` - default: `base` |

**Example Usage**

```jsx
import { Treasury, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <Treasury dao={dao} />;
}
```

### ⭐️ PropHouseRounds

**Options**

| key              | value                              |
| ---------------- | ---------------------------------- |
| `houseId`        | `number`                           |
| `theme?`         | `base` or `dark` - default: `base` |
| `rows?`          | `number` - default: `3`            |
| `itemsPerRow?`   | `number` - default: `2`            |
| `sortDirection?` | `ASC` or `DESC` - default: `DESC`  |

**Example Usage**

```jsx
import { PropHouseRounds, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <PropHouseRounds dao={dao} opts={{ houseId: 17 }} />;
}
```

### ⭐️ PropHouseProps

**Options**

| key       | value                              |
| --------- | ---------------------------------- |
| `houseId` | `number`                           |
| `round`   | `string`                           |
| `theme?`  | `base` or `dark` - default: `base` |
| `max?`    | `number` - default: `12`           |
| `format?` | `grid` or `list` - default: `list` |

**Example Usage**

```jsx
import { PropHouseProps, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return (
    <PropHouseProps
      dao={dao}
      opts={{ houseId: 17, round: 'Retroactive Funding' }}
    />
  );
}
```

---
_Source: https://npm.io/package/nouns-builder-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._