https://github.com/gitcoinco/grants-stack-widget-react
https://github.com/gitcoinco/grants-stack-widget-react
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gitcoinco/grants-stack-widget-react
- Owner: gitcoinco
- Created: 2024-07-11T13:18:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T11:23:05.000Z (almost 2 years ago)
- Last Synced: 2024-07-12T20:17:57.536Z (almost 2 years ago)
- Language: TypeScript
- Size: 215 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Grants Stack Widget React Component
This widget displays active donation rounds and offers a direct link for contributions to your project. Follow this guide for a quick and easy setup.
## 🚀 Getting Started
### Installation
First, install the widget using npm:
```bash
npm install @gitcoin/grants-stack-widget-react
```
### Usage
Import the `Widget` component and use it in your application as shown below:
```jsx
import Widget from "@gitcoin/grants-stack-widget-react";
;
```
## 📋 Props
The `Widget` component accepts the following props:
### Required Props
- `projectId: string` (Required): The project ID in bytes32 format (e.g., `0x1234...`).
### Optional Props
- `scale: number` (Optional, default: `1`): Adjust the scale of the widget.
- `testnet: boolean` (Optional, default: `false`): Use testnet configurations.
- `explorerUrl: string` (Optional): Custom explorer URL.
- `indexerEndpoint: string` (Optional): Custom indexer endpoint URL.
- `chainsOverride: number[]` (Optional): Override the list of chain IDs.
## 🔧 Customization
### Scaling the Widget
You can adjust the scale of the widget using the `scale` prop:
```jsx
```
### Using Testnet
If you want to show testnet rounds as well, set the `testnet` prop to `true`:
```jsx
```
### Custom Explorer URL
You can specify a custom Gitcoin Explorer URL using the `explorerUrl` prop:
```jsx
```
### Custom Indexer Endpoint
If you have a custom indexer endpoint, you can set it using the `indexerEndpoint` prop:
```jsx
```
### Chains Override
To override the list of chain IDs, use the `chainsOverride` prop:
```jsx
```
## 📚 Full Example
Here's a complete example with all props:
```jsx
import React from "react";
import ReactDOM from "react-dom";
import Widget from "@gitcoin/grants-stack-widget-react";
const App = () => (
);
ReactDOM.render(, document.getElementById("root"));
```
## 🛠️ Development
To contribute or make changes, follow these steps:
1. Clone the repository.
2. Run `npm install` to install dependencies.
3. Run `npm build` to build the package.
4. Make your changes and submit a pull request.
---
For any questions or issues, please open an issue on GitHub or contact the maintainers.
Happy coding! 🚀