{"id":22599667,"url":"https://github.com/mbb10324/react-onus","last_synced_at":"2025-03-28T19:47:18.559Z","repository":{"id":192945332,"uuid":"687789110","full_name":"mbb10324/react-onus","owner":"mbb10324","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-26T04:09:09.000Z","size":1417,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T23:09:41.017Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mbb10324.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":"docs/code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-06T02:25:13.000Z","updated_at":"2023-09-06T02:26:08.000Z","dependencies_parsed_at":"2023-09-06T03:53:15.487Z","dependency_job_id":"9c80c9e2-6228-4657-ab05-170ce9ffdfea","html_url":"https://github.com/mbb10324/react-onus","commit_stats":null,"previous_names":["mbb10324/react-onus"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbb10324%2Freact-onus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbb10324%2Freact-onus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbb10324%2Freact-onus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbb10324%2Freact-onus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbb10324","download_url":"https://codeload.github.com/mbb10324/react-onus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246093101,"owners_count":20722395,"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":"2024-12-08T11:11:04.089Z","updated_at":"2025-03-28T19:47:18.534Z","avatar_url":"https://github.com/mbb10324.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mbb10324/react-onus/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/mbb10324/react-onus/main/docs/logo.png\" alt=\"react-figura\" width=\"50%\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/npm-v2.0.0-violet?style=for-the-badge\" alt=\"badge\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/gzip_size-9.4kB-orange?style=for-the-badge\" alt=\"badge\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/license-Apache_2.0-blue?style=for-the-badge\" alt=\"badge\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/coverage-100%25-green?style=for-the-badge\" alt=\"badge\"/\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\nreact-onus is a React component library designed to simplify the process of loading and error handling for assets like images, videos, fonts, and more within your projects. The library offers a simple, effective, and intelligent approach to managing the wait times associated with asset loading. Quickly create a better user experience, and achieve a faster development experience with react-onus.\n\n## Installation\n\n`npm install react-onus`\n\n## Features\n\n-   Handle loading of various assets to include images, videos, audio, fonts, and SVGs.\n-   Handle errors when loading assets\n-   Easily support custom loading and error components.\n\n## Usage\n\n```\nimport React from 'react';\nimport Onus, { type Asset } from 'react-onus';\n\nconst App = () =\u003e {\n  const assets: Asset[] = [\n    { type: 'image', src: 'path-to-image.jpg' },\n    { type: 'font', src: 'font-name' },\n  ];\n\n  return (\n    \u003cOnus assets={assets} loader={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n        \u003cdiv\u003e\n            \u003ch1\u003eYour main App content\u003c/h1\u003e\n            \u003cimg src=\"path-to-image.jpg\" alt=\"img\" /\u003e\n        \u003c/div\u003e\n    \u003c/Onus\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\n-   `children`: By default react-onus will render (or show a loader/error in place of) the children within `\u003cOnus\u003e\u003c/Onus\u003e`\n-   `assets` (required): An array of objects with type and src properties indicating the assets you want to wait for.\n-   `loader` (optional): A custom component displayed while assets load. If omitted, react-onus will show its default spinner.\n-   `error` (optional): Specify a custom error component to show if an error occurs. Without this prop, react-onus displays a default error message.\n-   `handleLoading` (optional, default=true): Set this to false if you want react-onus to bypass showing a loader, this will simply return its children. You can use this in conjunction with onLoaded to handle your own loading state\n-   `handleErrors` (optional, default=false): Set this to true if you want react-onus to handle asset loading errors. By default, this is set to false. If an asset fails during the preload process and handleErrors is false, the spinner will disappear once the preload result is received.\n-   `onLoaded` (optional): A callback function that is called when all assets have loaded successfully. ex:\n\n```\n\u003cOnus assets={someAssets} onLoaded={() =\u003e console.log(\"All assets have been loaded!\")}\u003e\n    {/* children */}\n\u003c/Onus\u003e\n```\n\n## Assets\n\nThe asset prop should always be structured like the example below. ensure your `type` matches the `src`.\n\nex:\n\n```\nconst asset = [\n    {\n        type: \"image\" | \"svg\" | \"video\" | \"audio\" | \"font\"\n        src: string\n    }\n]\n```\n\n## Fonts\n\nFonts can be especially tricky when waiting on them to load or checking for errors due to the numerous methods of utilizing/importing/fetching them. The fontfaceobserver library has an elegant solution for this in a really lightweight package. For that reason, this is the only dependecy that react-onus relies on. Regardless of how you use your fonts within your project fontfaceobserver detects the actual webfont so this makes it really effective and efficient to just use the font-family name as the src for our asset.\n\nex:\n\n```\nconst asset = [\n    {\n        type: \"font\"\n        src: \"Roboto\"\n    }\n]\n```\n\n## Contributing\n\nreact-onus is an open-source library, and we welcome contributions from the developer community. If you're interested in contributing, we recommend following these steps located within the `/docs` folder to get started:\n\n1. Read the **code-of-conduct.md**: Before contributing, please familiarize yourself with our Code of Conduct, which outlines the expected behavior and guidelines for interaction within the Figura community.\n\n2. Review the **contributing.md**: Take some time to read our contribution guidelines, which provide helpful information and best practices for contributing code, reporting issues, and proposing new features.\n\n## License\n\nThis project is licensed under the Apache 2.0 License. See the LICENSE file for details.\n\n## Github\n\n[https://github.com/mbb10324/react-onus](https://github.com/mbb10324/react-onus \"react-onus\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbb10324%2Freact-onus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbb10324%2Freact-onus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbb10324%2Freact-onus/lists"}