https://github.com/royanger/react-ts-loaders
Simple, fully typed, accessilble loaders for React. No need to import CSS or anything else.
https://github.com/royanger/react-ts-loaders
loader react typescript
Last synced: about 1 year ago
JSON representation
Simple, fully typed, accessilble loaders for React. No need to import CSS or anything else.
- Host: GitHub
- URL: https://github.com/royanger/react-ts-loaders
- Owner: royanger
- License: mit
- Created: 2021-03-11T07:49:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-08T05:57:24.000Z (about 5 years ago)
- Last Synced: 2025-03-26T07:16:57.007Z (over 1 year ago)
- Topics: loader, react, typescript
- Language: TypeScript
- Homepage:
- Size: 1.32 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Loaders
A react library that provides components for pure CSS loaders. The library has full TypeScript support.
## Key Features
- Simple to use out of the box.
- Fully accessible. Includes visually hidden messages and alerts for users with screen readers.
- Above message can be customized via props.
- Quickly change the color(s), size, type, and message
[](https://www.npmjs.com/package/react-ts-loaders)
## Demo
You can view a demo with live configuration options at https://loaders.royanger.app/
## Install
```bash
npm install --save react-ts-loaders
```
## Usage
### No Configuration
This component is designed to (usually) work right out of the box without needing to set anything up.
```tsx
import * as React from 'react'
import Loader from 'react-ts-loaders'
const Example = () => {
return
}
```
### Simple Configuration
Passing in a loader type and a color is probably all most people will need or want.
```tsx
import * as React from 'react'
import Loader from 'react-ts-loaders'
const Example = () => {
return
}
```
## Full Configuration
```tsx
import * as React from 'react'
import Loader from 'react-ts-loaders'
const Example = () => {
return ` then that loader will be green. This gives you the flexibility to have one off loaders, while having a default configuration for your application.
As mentioned, `className` does behave a little differently. It will combine the classes given via Context with those given via the specific component instance. The resulting class list will include all classes.
You can access the Consumer via hooks if you need to. This is purely optional. The component handles consuming the context and applying the settings without anything required in your application. **_Note:_** If you do use this hook, be aware there is no check that your are using it inside of a Provider.
```jsx
import * as React from 'react'
import { useLoaderContext } from './loaderContext'
const context = useLoaderContext()
```
## Props
All props are optional. If you do not specify a type, then the `spinner` type will be used. If you don't specify any colors then the `currentColor` for the element will be used and the background will be transparent.
### `type`
Specify the type of loader you want to use. The current options are `spinner`, `ellipsis`, `dualring`, `hourglass`, `dotspinner`, `pulse`, `ring`, `roller`, `grid`, `ripple` and `circle`.
### `color`
The color to use for the loader. If no `altColor` is specified then `color` is used for all foreground elements and the loader will have one consistent color.
Valid ways to define your color:
- `color="blue"` (any [HTML Color name](https://www.w3schools.com/colors/colors_names.asp))
- `color="rgb(54, 3, 95)"`
- `color="rgba(54, 3, 95,.3)"`
- `color="hsl(147, 50%, 47%)"`
- `color="hsla(147, 50%, 47%,.2)"`
- `color="var(--brand-primary)"` (CSS variables defined in your application)
### `altColor`
This will define the secondary foreground color for the loader. This will make it into a duotone variation. The `altColor` can be defined the same way as `color` above.
### `size`
This number should represent a percent, just without the % sign. It will increase of decrease the size of the loader appropriately.
Examples:
- `size={200}` - The loader will be 200% default size
- `size={50}` - The loader will be 50% default size
### `message`
By default the loader has a visually hidden message of _'Content is loading.'_ inside of the loader component. This is paired with an '_role='alert'_ to alert users with screen readers that content is loading. This prop allows you to customize that message or provide localized messages to your users.
### `className`
Pass any classes you want to the Loader. These will be applied to the outer most div so you can target styling.
## Credit
At this time, all of the loaders used in this package from from Loading.io and can be found at [Loading.io Pure CSS Loader](https://loading.io/css/). These is a great resource and all of the code has been released under the CCO License.
## License
MIT © [royanger](https://github.com/royanger)