{"id":29177867,"url":"https://github.com/gitcoinco/grants-stack-widget-react","last_synced_at":"2025-07-01T18:09:02.381Z","repository":{"id":247995760,"uuid":"827343722","full_name":"gitcoinco/grants-stack-widget-react","owner":"gitcoinco","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-12T11:23:05.000Z","size":220,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-07-12T20:17:57.536Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitcoinco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-11T13:18:25.000Z","updated_at":"2024-07-11T20:20:32.000Z","dependencies_parsed_at":"2024-07-11T20:03:16.258Z","dependency_job_id":"a19756c8-1b7e-4597-83e9-5f506038f28c","html_url":"https://github.com/gitcoinco/grants-stack-widget-react","commit_stats":null,"previous_names":["gitcoinco/grants-stack-widget-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gitcoinco/grants-stack-widget-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fgrants-stack-widget-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fgrants-stack-widget-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fgrants-stack-widget-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fgrants-stack-widget-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitcoinco","download_url":"https://codeload.github.com/gitcoinco/grants-stack-widget-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fgrants-stack-widget-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263013738,"owners_count":23399815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-01T18:08:57.187Z","updated_at":"2025-07-01T18:09:02.362Z","avatar_url":"https://github.com/gitcoinco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grants Stack Widget React Component\n\nThis widget displays active donation rounds and offers a direct link for contributions to your project. Follow this guide for a quick and easy setup.\n\n## 🚀 Getting Started\n\n### Installation\n\nFirst, install the widget using npm:\n\n```bash\nnpm install @gitcoin/grants-stack-widget-react\n```\n\n### Usage\n\nImport the `Widget` component and use it in your application as shown below:\n\n```jsx\nimport Widget from \"@gitcoin/grants-stack-widget-react\";\n\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n/\u003e;\n```\n\n## 📋 Props\n\nThe `Widget` component accepts the following props:\n\n### Required Props\n\n- `projectId: string` (Required): The project ID in bytes32 format (e.g., `0x1234...`).\n\n### Optional Props\n\n- `scale: number` (Optional, default: `1`): Adjust the scale of the widget.\n- `testnet: boolean` (Optional, default: `false`): Use testnet configurations.\n- `explorerUrl: string` (Optional): Custom explorer URL.\n- `indexerEndpoint: string` (Optional): Custom indexer endpoint URL.\n- `chainsOverride: number[]` (Optional): Override the list of chain IDs.\n\n## 🔧 Customization\n\n### Scaling the Widget\n\nYou can adjust the scale of the widget using the `scale` prop:\n\n```jsx\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n  scale={1.5}\n/\u003e\n```\n\n### Using Testnet\n\nIf you want to show testnet rounds as well, set the `testnet` prop to `true`:\n\n```jsx\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n  testnet={true}\n/\u003e\n```\n\n### Custom Explorer URL\n\nYou can specify a custom Gitcoin Explorer URL using the `explorerUrl` prop:\n\n```jsx\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n  explorerUrl=\"https://mycustomexplorer.com\"\n/\u003e\n```\n\n### Custom Indexer Endpoint\n\nIf you have a custom indexer endpoint, you can set it using the `indexerEndpoint` prop:\n\n```jsx\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n  indexerEndpoint=\"https://myindexer.com\"\n/\u003e\n```\n\n### Chains Override\n\nTo override the list of chain IDs, use the `chainsOverride` prop:\n\n```jsx\n\u003cWidget\n  projectId={\n    \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n  }\n  chainsOverride={[1, 3, 4]}\n/\u003e\n```\n\n## 📚 Full Example\n\nHere's a complete example with all props:\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Widget from \"@gitcoin/grants-stack-widget-react\";\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cWidget\n      projectId={\n        \"0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef\"\n      }\n      scale={1.2}\n      testnet={true}\n      explorerUrl=\"https://mycustomexplorer.com\"\n      indexerEndpoint=\"https://myindexer.com\"\n      chainsOverride={[1, 42, 100]}\n    /\u003e\n  \u003c/div\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## 🛠️ Development\n\nTo contribute or make changes, follow these steps:\n\n1. Clone the repository.\n2. Run `npm install` to install dependencies.\n3. Run `npm build` to build the package.\n4. Make your changes and submit a pull request.\n\n---\n\nFor any questions or issues, please open an issue on GitHub or contact the maintainers.\n\nHappy coding! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitcoinco%2Fgrants-stack-widget-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitcoinco%2Fgrants-stack-widget-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitcoinco%2Fgrants-stack-widget-react/lists"}