{"id":26681629,"url":"https://github.com/royanger/react-ts-loaders","last_synced_at":"2025-04-12T12:35:16.215Z","repository":{"id":57346745,"uuid":"346620194","full_name":"royanger/react-ts-loaders","owner":"royanger","description":"Simple, fully typed, accessilble loaders for React. No need to import CSS or anything else.","archived":false,"fork":false,"pushed_at":"2021-06-08T05:57:24.000Z","size":1380,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T07:16:57.007Z","etag":null,"topics":["loader","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/royanger.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":"2021-03-11T07:49:01.000Z","updated_at":"2023-03-09T01:06:38.000Z","dependencies_parsed_at":"2022-08-25T18:51:16.508Z","dependency_job_id":null,"html_url":"https://github.com/royanger/react-ts-loaders","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royanger%2Freact-ts-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royanger%2Freact-ts-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royanger%2Freact-ts-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royanger%2Freact-ts-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/royanger","download_url":"https://codeload.github.com/royanger/react-ts-loaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248567081,"owners_count":21125783,"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":["loader","react","typescript"],"created_at":"2025-03-26T07:17:00.429Z","updated_at":"2025-04-12T12:35:16.188Z","avatar_url":"https://github.com/royanger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Loaders\n\nA react library that provides components for pure CSS loaders. The library has full TypeScript support.\n\n## Key Features\n\n-  Simple to use out of the box.\n-  Fully accessible. Includes visually hidden messages and alerts for users with screen readers.\n-  Above message can be customized via props.\n-  Quickly change the color(s), size, type, and message\n\n[![NPM](https://img.shields.io/npm/v/react-ts-loaders.svg)](https://www.npmjs.com/package/react-ts-loaders)\n\n## Demo\n\nYou can view a demo with live configuration options at https://loaders.royanger.app/\n\n## Install\n\n```bash\nnpm install --save react-ts-loaders\n```\n\n## Usage\n\n### No Configuration\n\nThis component is designed to (usually) work right out of the box without needing to set anything up.\n\n```tsx\nimport * as React from 'react'\nimport Loader from 'react-ts-loaders'\n\nconst Example = () =\u003e {\n   return \u003cLoader /\u003e\n}\n```\n\n### Simple Configuration\n\nPassing in a loader type and a color is probably all most people will need or want.\n\n```tsx\nimport * as React from 'react'\nimport Loader from 'react-ts-loaders'\n\nconst Example = () =\u003e {\n   return \u003cLoader type=\"spinner\" color=\"blue\" /\u003e\n}\n```\n\n## Full Configuration\n\n```tsx\nimport * as React from 'react'\nimport Loader from 'react-ts-loaders'\n\nconst Example = () =\u003e {\n   return \u003cLoader type=\"spinner\" color=\"blue\" altColor=\"lightblue\" size={200} className=\"dark-loader /\u003e\n}\n```\n\n## Context Configuration\n\nAre you planning to use Loaders in many places and want to control their type, colors, size or classes from one location? You can easily use Context to create a base configuration.\n\n```tsx\nimport * as React from 'react'\nimport { LoaderProvider } from '../src/lib/loaderContext'\n\nReactDOM.render(\n   \u003cReact.StrictMode\u003e\n      \u003cLoaderProvider\n         value={{\n            type: 'dualring',\n            color: 'rgb(0, 128, 58)',\n            altColor: 'rgb(241, 25, 213)',\n            size: 100,\n            className: 'dark-loader',\n         }}\n      \u003e\n         \u003cApp /\u003e\n      \u003c/LoaderProvider\u003e\n```\n\nThe Context Configuration takes all of the same props as a single `\u003cLoader\u003e` component. The only **_required_** prop is `type`.\n\nWith the exception of `className`, the props you supply to the Context Configuration can be **_overridden_** on a specific instance of the `Loader` component. IE, you can set all Loaders to be a red, but if you do `\u003cLoader color=\"rgb(0, 128, 58)\" /\u003e` then that loader will be green. This gives you the flexibility to have one off loaders, while having a default configuration for your application.\n\nAs 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.\n\nYou 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.\n\n```jsx\nimport * as React from 'react'\nimport { useLoaderContext } from './loaderContext'\n\nconst context = useLoaderContext()\n```\n\n## Props\n\nAll 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.\n\n### `type`\n\nSpecify the type of loader you want to use. The current options are `spinner`, `ellipsis`, `dualring`, `hourglass`, `dotspinner`, `pulse`, `ring`, `roller`, `grid`, `ripple` and `circle`.\n\n### `color`\n\nThe 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.\n\nValid ways to define your color:\n\n-  `color=\"blue\"` (any [HTML Color name](https://www.w3schools.com/colors/colors_names.asp))\n-  `color=\"rgb(54, 3, 95)\"`\n-  `color=\"rgba(54, 3, 95,.3)\"`\n-  `color=\"hsl(147, 50%, 47%)\"`\n-  `color=\"hsla(147, 50%, 47%,.2)\"`\n-  `color=\"var(--brand-primary)\"` (CSS variables defined in your application)\n\n### `altColor`\n\nThis 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.\n\n### `size`\n\nThis number should represent a percent, just without the % sign. It will increase of decrease the size of the loader appropriately.\n\nExamples:\n\n-  `size={200}` - The loader will be 200% default size\n-  `size={50}` - The loader will be 50% default size\n\n### `message`\n\nBy 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.\n\n### `className`\n\nPass any classes you want to the Loader. These will be applied to the outer most div so you can target styling.\n\n## Credit\n\nAt 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.\n\n## License\n\nMIT © [royanger](https://github.com/royanger)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyanger%2Freact-ts-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyanger%2Freact-ts-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyanger%2Freact-ts-loaders/lists"}