Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mbb10324/react-onus
https://github.com/mbb10324/react-onus
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mbb10324/react-onus
- Owner: mbb10324
- License: apache-2.0
- Created: 2023-09-06T02:25:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-26T04:09:09.000Z (over 1 year ago)
- Last Synced: 2024-08-08T23:45:12.747Z (6 months ago)
- Language: TypeScript
- Size: 1.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/contributing.md
- License: LICENSE.md
- Code of conduct: docs/code-of-conduct.md
Awesome Lists containing this project
README
react-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.
## Installation
`npm install react-onus`
## Features
- Handle loading of various assets to include images, videos, audio, fonts, and SVGs.
- Handle errors when loading assets
- Easily support custom loading and error components.
## Usage
```
import React from 'react';
import Onus, { type Asset } from 'react-onus';
const App = () => {
const assets: Asset[] = [
{ type: 'image', src: 'path-to-image.jpg' },
{ type: 'font', src: 'font-name' },
];
return (
Loading...}>
Your main App content
);
};
export default App;
```
## Props
- `children`: By default react-onus will render (or show a loader/error in place of) the children within ``
- `assets` (required): An array of objects with type and src properties indicating the assets you want to wait for.
- `loader` (optional): A custom component displayed while assets load. If omitted, react-onus will show its default spinner.
- `error` (optional): Specify a custom error component to show if an error occurs. Without this prop, react-onus displays a default error message.
- `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
- `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.
- `onLoaded` (optional): A callback function that is called when all assets have loaded successfully. ex:
```
console.log("All assets have been loaded!")}>
{/* children */}
```
## Assets
The asset prop should always be structured like the example below. ensure your `type` matches the `src`.
ex:
```
const asset = [
{
type: "image" | "svg" | "video" | "audio" | "font"
src: string
}
]
```
## Fonts
Fonts 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.
ex:
```
const asset = [
{
type: "font"
src: "Roboto"
}
]
```
## Contributing
react-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:
1. 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.
2. 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.
## License
This project is licensed under the Apache 2.0 License. See the LICENSE file for details.
## Github
[https://github.com/mbb10324/react-onus](https://github.com/mbb10324/react-onus "react-onus")