{"id":23092992,"url":"https://github.com/crispengari/rai","last_synced_at":"2026-04-11T13:03:16.557Z","repository":{"id":65191295,"uuid":"585595404","full_name":"CrispenGari/RAI","owner":"CrispenGari","description":"🏆📿 this is a simple react-activity indicator library  component.","archived":false,"fork":false,"pushed_at":"2023-01-10T09:52:30.000Z","size":338,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-05T23:40:51.486Z","etag":null,"topics":["activity-indicator","javascript","nextjs","react","react-component-library","react-libraries","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrispenGari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-05T15:16:22.000Z","updated_at":"2023-01-09T11:45:45.000Z","dependencies_parsed_at":"2023-02-08T18:16:12.442Z","dependency_job_id":null,"html_url":"https://github.com/CrispenGari/RAI","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/CrispenGari/RAI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2FRAI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2FRAI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2FRAI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2FRAI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrispenGari","download_url":"https://codeload.github.com/CrispenGari/RAI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2FRAI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259745257,"owners_count":22905071,"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":["activity-indicator","javascript","nextjs","react","react-component-library","react-libraries","reactjs","typescript"],"created_at":"2024-12-16T21:46:12.194Z","updated_at":"2025-12-30T22:34:18.732Z","avatar_url":"https://github.com/CrispenGari.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React Activity Indicators (RAI)\n\nThis is a simple minor react component library for rendering activity indicators on the `dom`.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"cover.png\" width=\"70%\" alt=\"cover\"/\u003e\u003c/p\u003e\n\n### Getting started\n\nTo get started first you need to install the package `@crispengari/react-activity-indicators` as follows:\n\n```shell\n# -- using yarn\nyarn add @crispengari/react-activity-indicators\n\n# -- using npm\nnpm install @crispengari/react-activity-indicators\n\n# using pnpm\npnpm install @crispengari/react-activity-indicators\n```\n\n\u003e You will need to import the `react-activity-indicators.cjs.development.css` as a global `css` file depending on the project you are currently working on.\n\n### Next.js project\n\nIf you are using this component library in your `next` app we recommend that you import `react-activity-indicators.cjs.development.css` in the `_app.tsx` or `_app.ts` as follows:\n\n```tsx\nimport \"../styles/globals.css\";\nimport \"@crispengari/react-activity-indicators/dist/react-activity-indicators.cjs.development.css\";\nimport type { AppProps } from \"next/app\";\n...\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003cComponent {...pageProps} /\u003e\n  );\n}\n```\n\n### React.js project\n\nIf you are using this component library in your `react` app we recommend that you import `react-activity-indicators.cjs.development.css` in the `index.tsx` or `index.ts` as follows:\n\n```tsx\nimport '@crispengari/react-activity-indicators/dist/react-activity-indicators.cjs.development.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nconst root = ReactDOM.createRoot(\n  document.getElementById('root') as HTMLElement\n);\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n### Usage\n\nTo use activity indicators in your react component you do it as follows:\n\n```tsx\nimport React from 'react'\nimport {DoubleCircularIndicator} from '@crispengari/react-activity-indicators';\n\n....\n\nexport default App:React.FC\u003c{}\u003e = ()=\u003e{\n    return (\n        \u003cdiv className=\"app\"\u003e\n            \u003cDoubleCircularIndicator size=\"small\" /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n### Documentation\n\nThe documentation can be found [here](https://rai-docs.vercel.app/) or you can scan the following `QR` code:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"qrcode.png\" alt=\"qr\" width=\"300\"/\u003e\u003c/p\u003e\n\n### License\n\nIn this project i'm using the `MIT` license which read as follows:\n\n```\nMIT License\n\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c HEAD\nCopyright (c) 2022 CrispenGari\n=======\nCopyright (c) 2022 crispengari\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e a3a7422c6379d8e8b4b1d09bdb67a8583cfddf23\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c HEAD\nSOFTWARE.\n=======\nSOFTWARE.\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e a3a7422c6379d8e8b4b1d09bdb67a8583cfddf23\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Frai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrispengari%2Frai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Frai/lists"}