# mirrorblocks

> Mirror.xyz components to render web3 blocks

Latest version **0.0.16** (published 2022-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install mirrorblocks
pnpm add mirrorblocks
yarn add mirrorblocks
bun add mirrorblocks
```

## 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.0.16 |
| Published | 2022-02-03 |
| First published | 2022-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 899.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kirill Noskov |
| Maintainers | noskovvkirill |

## Links

- npm: https://www.npmjs.com/package/mirrorblocks
- npm.io page: https://npm.io/package/mirrorblocks

## Dependencies (3)

- [swr](https://npm.io/package/swr.md) ^1.2.0
- [degen](https://npm.io/package/degen.md) ^0.0.57
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^13.1.3

## Recent versions

- 0.0.16 (latest) — 2022-02-03
- 0.0.15 — 2022-02-03
- 0.0.13 — 2022-02-03
- 0.0.12 — 2022-02-03
- 0.0.11 — 2022-02-03
- 0.0.1 — 2022-02-02

## README

## Styled components for Mirror.xyz 
Building blocks for Mirror.xyz to render web3 content in your React app. 
Styled with [Mirror Degen](https://github.com/mirror-xyz/degen).

Renders:
- Entries 
- Crowdfunds
- Editions
- Entry editions 
- Polls 
- ... more to come 

### Usage 
___

1. Install mirrorblocks
```
npm install mirrorblocks 
```
```
yarn add mirrorblocks 
```
2. Wrap your app with the ThemeProvider. It works for [Mirror Degen](https://github.com/mirror-xyz/degen) too. 
```
import { ThemeProvider } from 'mirrorblocks'

const App = () => (
    <ThemeProvider>
        <YourRoutes />
    </ThemeProvider>
)
```

3. Import the components you want to use
```
import { Crowdfund, Entry, Edition, EntryEdition, Poll } from 'mirrorblocks'

const MyPage = () => (
    <main>
        <Poll digest={'U91KFBfSmWCjJar4-tflQBSQK1H0IVTOMheSPrHvU0Q'} id={"18"} />
        <Crowdfund maxWidth={"64"} address={"0x18f623e397EF28F1A5a094840f7F6f5587828b94"} />
        <Edition contract={'0xDF5b5ee15CC96ba7d0CB6BD9b2c0fc4417ab6445'} id={453} maxWidth={{ xs: 'full', md: 'full', lg: '96' }}/> //supports media queries
        <EntryEdition digest={"sfgXhqtwwMkhHLnAM1jVr16MdSJ4RGSb1Y6CAKpslgc"} />
    </main>
)

export default MyPage
```

### License
___

MIT.

If you have any optimizations ideas or improvements feel free to contribute :)

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