{"_id":"@a-2-c-2-anpm/ut-inventore-illo","name":"@a-2-c-2-anpm/ut-inventore-illo","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a-2-c-2-anpm/ut-inventore-illo","version":"1.0.0","description":"[![npm version](https://badge.fury.io/js/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url] [![downloads](https://img.shields.io/npm/dt/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url] [![license](https://img.shields.io/npm/l/@a-2-c-2-anpm/ut-inventore-illo.svg","main":"index.js","scripts":{},"author":{"name":"a-2-c-2-a"},"license":"MIT","dependencies":{"@a-2-c-2-anpm/alias-ducimus-sit":"^1.0.0","@a-2-c-2-anpm/atque-nemo-accusantium":"^1.0.0","@a-2-c-2-anpm/distinctio-quibusdam-culpa":"^1.0.0","@a-2-c-2-anpm/eligendi-praesentium-hic":"^1.0.0","@a-2-c-2-anpm/enim-amet-voluptatem":"^1.0.0","@a-2-c-2-anpm/error-dolorem-a":"^1.0.0","@a-2-c-2-anpm/excepturi-natus-facere":"^1.0.0","@a-2-c-2-anpm/expedita-recusandae-aut":"^1.0.0","@a-2-c-2-anpm/fugit-impedit-quae":"^1.0.0","@a-2-c-2-anpm/hic-maiores-accusantium":"^1.0.0","@a-2-c-2-anpm/laborum-exercitationem-quis":"^1.0.0","@a-2-c-2-anpm/laudantium-dolor-perspiciatis":"^1.0.0","@a-2-c-2-anpm/maiores-quis-dignissimos":"^1.0.0","@a-2-c-2-anpm/nam-eaque-occaecati":"^1.0.0","@a-2-c-2-anpm/neque-culpa-culpa":"^1.0.0","@a-2-c-2-anpm/neque-iste-eum":"^1.0.0","@a-2-c-2-anpm/nobis-similique-magni":"^1.0.0","@a-2-c-2-anpm/officia-tempore-ipsa":"^1.0.0","@a-2-c-2-anpm/perferendis-qui-suscipit":"^1.0.0","@a-2-c-2-anpm/placeat-suscipit-cumque":"^1.0.0","@a-2-c-2-anpm/quo-quia-expedita":"^1.0.0","@a-2-c-2-anpm/quos-voluptates-excepturi":"^1.0.0","@a-2-c-2-anpm/saepe-praesentium-iusto":"^1.0.0","@a-2-c-2-anpm/sint-ipsa-atque":"^1.0.0","@a-2-c-2-anpm/vitae-ad-molestiae":"^1.0.0","@ajhgwdjnpm/quas-mollitia-aspernatur-reprehenderit":"^1.0.0","calculator-3rd":"^1.0.12","mi-dex-func-3":"^1.0.0","vnhat-button-component":"^1.0.0","vnhat-forminput-component":"^1.0.1"},"keywords":["generics","bundling","compare","express","watching","Array.prototype.includes","__proto__","url","package","search","flag","args","ES2018","trim","joi","inspect","visual","predictable","import","nested css","filter","from","shared","ES","unicode","streams2","agent","limited","slice","metadata","256","number","moment","ascii","runtime","kinesis","concatMap","Float32Array","prop","clone","stdlib","URL","encryption","bluebird","argument","cloudwatch","queueMicrotask","react-hook-form","dataview","uuid","api","full","amazon","autoprefixer","view","espree","pnpm9","match","shim","positive","look-up","performance","weakmap","extend","protocol-buffers","ES2023","arktype","mime","tslib","schema","preprocessor","utility","reduce","groupBy","fps","nope","polyfill","JSON","japanese","@@toStringTag","mapreduce","function","ast","mime-db","forms","drop","sham","ender","east-asian-width","classname","negative","quote","console","settings","task","string","fastclone","progress","bound","dynamodb","move","iterator","terminal","classnames","s3","matchAll","cloudtrail","StyleSheet","Int8Array","jQuery","spinner","pipe","stream","form","logger","has","defineProperty","enumerable","react-testing-library","mixins","css variable","vest","circular","art","util.inspect","width","recursive","trimStart","define","glacier","redact","typeerror","eslintplugin","await","bundler","workflow","symbols","rangeerror","reuse","proxy","ECMAScript 5","toStringTag","emoji","less mixins","core-js","deep-copy","css less","ava","typesafe","delete","patch","es7","connect","Object.assign","iam","output","Rx","classes","expression","airbnb","readablestream","wordwrap","byte","compile less","Object.defineProperty","Function.prototype.name","String.prototype.matchAll","Object.is","call-bound","deepcopy","browserlist","Reflect.getPrototypeOf","sqs","property","core","up","uninstall","ponyfill","tester","link","hash","asserts","prefix","tdd","replay","linewrap","beanstalk","regex","jsdom","crypto","css-in-js","command","once","postcss","Object.keys","flat","descriptors","dayjs","diff","hot","find","curl","json","hooks","functional","ECMAScript 2017","ES2016","writable","elasticache","aws","typed array","a11y","commander","stylesheet","ReactiveExtensions","ES5","ECMAScript 2022","set","accessor","flux","functions","cli","ES6","read","WeakSet","character","ReactiveX","parent","data","scheme","optimist","buffers","pretty","ArrayBuffer.prototype.slice","Map","vpc","chromium","less css","stringify","ES2022","arraybuffer","routing","accessibility","copy","argparse","protobuf","redux-toolkit","look","querystring","Symbol.toStringTag","datastructure","deterministic","wordbreak","es8","watcher","tap","RegExp#flags","js","fast-clone","String.prototype.trim","es2017","get","formatting","cache","ECMAScript 7","debugger","dotenv","symbol","dataView","stringifier","deep-clone","TypeScript","sequence","Array.prototype.flatMap","browser","[[Prototype]]","client","worker","ESnext","computed-types","higher-order","typanion","crypt","parser","async","ECMAScript 2021","ES2021","argv","ajv","break","throat","ArrayBuffer#slice","create","Object.values","every","eventEmitter","graphql","modules","which","Int32Array","bind","ArrayBuffer","robust","take","consume","mocha","javascript","style","typescript","full-width","hardlinks","last","simpledb","extension","file system","ts","assertion","cjk","env","descriptor","persistent","Array.prototype.flatten","redux","exec","internal","l10n","korean","Uint16Array","jest","ecmascript","buffer","performant","RFC-6455","Observables","picomatch","validate","Array.prototype.flat","setPrototypeOf","Array.prototype.filter","lockfile","check","merge","column","wrap","css nesting","term","Array.prototype.contains","rds","Symbol","watch","code points","shebang","fixed-width","emr","hasOwn","mkdirp","command-line","mkdir","helpers","rapid","time","typedarrays","fast-copy","keys","throttle","logging","postcss-plugin","lazy","symlinks","object","lint","negative zero","less.js","URLSearchParams","real-time","length","language","loadbalancing","state","parse","getintrinsic","RegExp.prototype.flags","text","equality","emit","typedarray","ES8","readable","framework","css","sort","characters","omit","testing","promises","option","_.extend","es6","HyBi","es","write","touch","http","figlet","node","ECMAScript 6","folder","optimizer","equal","make","BigInt64Array","colors","Object.entries","fullwidth","limit","guid","Array.prototype.findLast","estree","xterm",".env","endpoint","stateless","private data","collection","channel","Promise","warning","getter","TypedArray","codes","ECMAScript 2018","config","events","es5","xhr","findLast","open","Push","banner","plugin","symlink","installer","BigUint64Array","electron","workspace:*","module","browserslist","ES2020","slot","rgb","path","CSSStyleDeclaration","regular expression","getPrototypeOf","spinners","validation","input","assign","sorted","stable","RxJS","rfc4122","form-validation","callbind","walking","valid","wait","react-hooks","mru","includes","mimetypes","internal slot","setImmediate","Stream","busy","awesomesauce","format","contains","streams","prune","Iterator","lesscss","lru","native","colour","fastcopy","columns","bdd","typeof","duplex","proto","side","ECMAScript 2019","error","ses","authentication","ECMAScript 2015","environment","utilities","install","group","push","package.json","regexp","flatten","es-shims","eslintconfig","ec2","nodejs","live","swf","tape","0","color","name","hasOwnProperty","ES3","starter","dependencies","ansi","date","Array","mobile","zero","es2018","fsevents","chrome","rm -fr","chinese","$.extend","spec","fetch","log","WebSockets","package manager","fastify","rmdir","elb","jsdiff","Streams","intrinsic","query","properties","safe","dom-testing-library","dependency manager","YAML","ajax","jsx","ES7","parents","array","compiler","types","toArray","jwt","escape","syntaxerror","ECMAScript 3","Array.prototype.findLastIndex","shrinkwrap","https","directory","waf","gdpr","ES2015","cloudformation","rm"],"repository":{"type":"git","url":"git+https://github.com/a-2-c-2-anpm/ut-inventore-illo.git"},"homepage":"https://github.com/a-2-c-2-anpm/ut-inventore-illo/#readme","bugs":{"url":"https://github.com/a-2-c-2-anpm/ut-inventore-illo/issues"},"_id":"@a-2-c-2-anpm/ut-inventore-illo@1.0.0","gitHead":"9b3e6b24ea57d2544ec4ff0d21850be166f86d5e","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-Mc3T/fgFLumeI9yi2yyZv7wtYMp3Fg+UUdgie326nRm+2qlQNheYDsnInfZAwUjw+oaricApWGzEFJ274ClAiw==","shasum":"73cfaddf082524e5b0299de5dea855ee2ca625f4","tarball":"https://registry.npmjs.org/@a-2-c-2-anpm/ut-inventore-illo/-/ut-inventore-illo-1.0.0.tgz","fileCount":8,"unpackedSize":20666,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF//PpDFP/VoAwiXGf/VlgO4+YpWi0fGUc4uuvjRguXSAiEA76KHFZnrrmRYxRgTjbSuI827nf7BCmSgHookYKl6vto="}]},"_npmUser":{"name":"tranduc345zz","email":"tranduc345zz@gmail.com"},"directories":{},"maintainers":[{"name":"tranduc345zz","email":"tranduc345zz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ut-inventore-illo_1.0.0_1714818868300_0.06438728762681722"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-04T10:34:28.205Z","1.0.0":"2024-05-04T10:34:28.455Z","modified":"2024-05-04T10:34:28.786Z"},"maintainers":[{"name":"tranduc345zz","email":"tranduc345zz@gmail.com"}],"description":"[![npm version](https://badge.fury.io/js/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url] [![downloads](https://img.shields.io/npm/dt/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url] [![license](https://img.shields.io/npm/l/@a-2-c-2-anpm/ut-inventore-illo.svg","homepage":"https://github.com/a-2-c-2-anpm/ut-inventore-illo/#readme","keywords":["generics","bundling","compare","express","watching","Array.prototype.includes","__proto__","url","package","search","flag","args","ES2018","trim","joi","inspect","visual","predictable","import","nested css","filter","from","shared","ES","unicode","streams2","agent","limited","slice","metadata","256","number","moment","ascii","runtime","kinesis","concatMap","Float32Array","prop","clone","stdlib","URL","encryption","bluebird","argument","cloudwatch","queueMicrotask","react-hook-form","dataview","uuid","api","full","amazon","autoprefixer","view","espree","pnpm9","match","shim","positive","look-up","performance","weakmap","extend","protocol-buffers","ES2023","arktype","mime","tslib","schema","preprocessor","utility","reduce","groupBy","fps","nope","polyfill","JSON","japanese","@@toStringTag","mapreduce","function","ast","mime-db","forms","drop","sham","ender","east-asian-width","classname","negative","quote","console","settings","task","string","fastclone","progress","bound","dynamodb","move","iterator","terminal","classnames","s3","matchAll","cloudtrail","StyleSheet","Int8Array","jQuery","spinner","pipe","stream","form","logger","has","defineProperty","enumerable","react-testing-library","mixins","css variable","vest","circular","art","util.inspect","width","recursive","trimStart","define","glacier","redact","typeerror","eslintplugin","await","bundler","workflow","symbols","rangeerror","reuse","proxy","ECMAScript 5","toStringTag","emoji","less mixins","core-js","deep-copy","css less","ava","typesafe","delete","patch","es7","connect","Object.assign","iam","output","Rx","classes","expression","airbnb","readablestream","wordwrap","byte","compile less","Object.defineProperty","Function.prototype.name","String.prototype.matchAll","Object.is","call-bound","deepcopy","browserlist","Reflect.getPrototypeOf","sqs","property","core","up","uninstall","ponyfill","tester","link","hash","asserts","prefix","tdd","replay","linewrap","beanstalk","regex","jsdom","crypto","css-in-js","command","once","postcss","Object.keys","flat","descriptors","dayjs","diff","hot","find","curl","json","hooks","functional","ECMAScript 2017","ES2016","writable","elasticache","aws","typed array","a11y","commander","stylesheet","ReactiveExtensions","ES5","ECMAScript 2022","set","accessor","flux","functions","cli","ES6","read","WeakSet","character","ReactiveX","parent","data","scheme","optimist","buffers","pretty","ArrayBuffer.prototype.slice","Map","vpc","chromium","less css","stringify","ES2022","arraybuffer","routing","accessibility","copy","argparse","protobuf","redux-toolkit","look","querystring","Symbol.toStringTag","datastructure","deterministic","wordbreak","es8","watcher","tap","RegExp#flags","js","fast-clone","String.prototype.trim","es2017","get","formatting","cache","ECMAScript 7","debugger","dotenv","symbol","dataView","stringifier","deep-clone","TypeScript","sequence","Array.prototype.flatMap","browser","[[Prototype]]","client","worker","ESnext","computed-types","higher-order","typanion","crypt","parser","async","ECMAScript 2021","ES2021","argv","ajv","break","throat","ArrayBuffer#slice","create","Object.values","every","eventEmitter","graphql","modules","which","Int32Array","bind","ArrayBuffer","robust","take","consume","mocha","javascript","style","typescript","full-width","hardlinks","last","simpledb","extension","file system","ts","assertion","cjk","env","descriptor","persistent","Array.prototype.flatten","redux","exec","internal","l10n","korean","Uint16Array","jest","ecmascript","buffer","performant","RFC-6455","Observables","picomatch","validate","Array.prototype.flat","setPrototypeOf","Array.prototype.filter","lockfile","check","merge","column","wrap","css nesting","term","Array.prototype.contains","rds","Symbol","watch","code points","shebang","fixed-width","emr","hasOwn","mkdirp","command-line","mkdir","helpers","rapid","time","typedarrays","fast-copy","keys","throttle","logging","postcss-plugin","lazy","symlinks","object","lint","negative zero","less.js","URLSearchParams","real-time","length","language","loadbalancing","state","parse","getintrinsic","RegExp.prototype.flags","text","equality","emit","typedarray","ES8","readable","framework","css","sort","characters","omit","testing","promises","option","_.extend","es6","HyBi","es","write","touch","http","figlet","node","ECMAScript 6","folder","optimizer","equal","make","BigInt64Array","colors","Object.entries","fullwidth","limit","guid","Array.prototype.findLast","estree","xterm",".env","endpoint","stateless","private data","collection","channel","Promise","warning","getter","TypedArray","codes","ECMAScript 2018","config","events","es5","xhr","findLast","open","Push","banner","plugin","symlink","installer","BigUint64Array","electron","workspace:*","module","browserslist","ES2020","slot","rgb","path","CSSStyleDeclaration","regular expression","getPrototypeOf","spinners","validation","input","assign","sorted","stable","RxJS","rfc4122","form-validation","callbind","walking","valid","wait","react-hooks","mru","includes","mimetypes","internal slot","setImmediate","Stream","busy","awesomesauce","format","contains","streams","prune","Iterator","lesscss","lru","native","colour","fastcopy","columns","bdd","typeof","duplex","proto","side","ECMAScript 2019","error","ses","authentication","ECMAScript 2015","environment","utilities","install","group","push","package.json","regexp","flatten","es-shims","eslintconfig","ec2","nodejs","live","swf","tape","0","color","name","hasOwnProperty","ES3","starter","dependencies","ansi","date","Array","mobile","zero","es2018","fsevents","chrome","rm -fr","chinese","$.extend","spec","fetch","log","WebSockets","package manager","fastify","rmdir","elb","jsdiff","Streams","intrinsic","query","properties","safe","dom-testing-library","dependency manager","YAML","ajax","jsx","ES7","parents","array","compiler","types","toArray","jwt","escape","syntaxerror","ECMAScript 3","Array.prototype.findLastIndex","shrinkwrap","https","directory","waf","gdpr","ES2015","cloudformation","rm"],"repository":{"type":"git","url":"git+https://github.com/a-2-c-2-anpm/ut-inventore-illo.git"},"author":{"name":"a-2-c-2-a"},"bugs":{"url":"https://github.com/a-2-c-2-anpm/ut-inventore-illo/issues"},"license":"MIT","readme":"# React Spinners\n\n[![npm version](https://badge.fury.io/js/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url]\n[![downloads](https://img.shields.io/npm/dt/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url]\n[![license](https://img.shields.io/npm/l/@a-2-c-2-anpm/ut-inventore-illo.svg)][npm_url]\n\n<!-- [![next version](https://badgen.net/npm/v/@a-2-c-2-anpm/ut-inventore-illo/next)](https://www.npmjs.com/package/@a-2-c-2-anpm/ut-inventore-illo/v/next) -->\n\n[![Coverage Status](https://coveralls.io/repos/github/davidhu2000/@a-2-c-2-anpm/ut-inventore-illo/badge.svg?branch=main)](https://coveralls.io/github/davidhu2000/@a-2-c-2-anpm/ut-inventore-illo?branch=master)\n![Dependency Count](https://badgen.net/bundlephobia/dependency-count/@a-2-c-2-anpm/ut-inventore-illo)\n![Types Included](https://badgen.net/npm/types/@a-2-c-2-anpm/ut-inventore-illo)\n![Tree Shaking Supported](https://badgen.net/bundlephobia/tree-shaking/@a-2-c-2-anpm/ut-inventore-illo)\n\n[npm_url]: https://www.npmjs.org/package/@a-2-c-2-anpm/ut-inventore-illo\n\nA collection of loading spinners with React.js based on [Halogen](https://github.com/yuanyan/halogen).\n\nThis package is bootstraped using [react-npm-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)\n\n## Demo\n\n[Demo Page](https://www.davidhu.io/@a-2-c-2-anpm/ut-inventore-illo)\n\n[Storybook](https://www.davidhu.io/@a-2-c-2-anpm/ut-inventore-illo/storybook/)\n\n## Installation\n\nWith Yarn:\n\n```bash\nyarn add @a-2-c-2-anpm/ut-inventore-illo\n```\n\nWith npm:\n\n```bash\nnpm install --save @a-2-c-2-anpm/ut-inventore-illo\n```\n\n## Usage\n\nEach loader has their own default properties. You can overwrite the defaults by passing props into the loaders.\n\nEach loader accepts a `loading` prop as a boolean. The loader will render `null` if `loading` is `false`.\n\n### Example\n\n```tsx\nimport { useState, CSSProperties } from \"react\";\nimport ClipLoader from \"@a-2-c-2-anpm/ut-inventore-illo/ClipLoader\";\n\nconst override: CSSProperties = {\n  display: \"block\",\n  margin: \"0 auto\",\n  borderColor: \"red\",\n};\n\nfunction App() {\n  let [loading, setLoading] = useState(true);\n  let [color, setColor] = useState(\"#ffffff\");\n\n  return (\n    <div className=\"sweet-loading\">\n      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>\n      <input value={color} onChange={(input) => setColor(input.target.value)} placeholder=\"Color of the loader\" />\n\n      <ClipLoader\n        color={color}\n        loading={loading}\n        cssOverride={override}\n        size={150}\n        aria-label=\"Loading Spinner\"\n        data-testid=\"loader\"\n      />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n<details><summary>Example using React Class</summary>\n\n```tsx\nimport React from \"react\";\nimport ClipLoader from \"@a-2-c-2-anpm/ut-inventore-illo/ClipLoader\";\n\nconst override: React.CSSProperties = {\n  display: \"block\",\n  margin: \"0 auto\",\n  borderColor: \"red\",\n};\n\nclass AwesomeComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      loading: true,\n    };\n  }\n\n  render() {\n    return (\n      <div className=\"sweet-loading\">\n        <ClipLoader\n          cssOverride={override}\n          size={150}\n          color={\"#123abc\"}\n          loading={this.state.loading}\n          speedMultiplier={1.5}\n          aria-label=\"Loading Spinner\"\n          data-testid=\"loader\"\n        />\n      </div>\n    );\n  }\n}\n```\n\n</details>\n\n## Available Loaders, PropTypes, and Default Values\n\nCommon default props for all loaders:\n\n```\nloading: true;\ncolor: \"#000000\";\ncssOverride: {}\nspeedMultiplier: 1;\n```\n\nAll valid HTML props such as `aria-*` and `data-*` props are fully supported.\n\n### `color` prop\n\n`color` prop accepts a color hash in the format of `#XXXXXX` or `#XXX`. It also accepts basic colors listed below:\n\n> maroon, red, orange, yellow, olive, green, purple, white,\n> fuchsia, lime, teal, aqua, blue, navy, black, gray, silver\n\n### `cssOverride` prop\n\nThe `cssOverride` prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.\n\n### `size`, `height`, `width`, and `radius` props\n\nThe input to these props can be _number_ or _string_.\n\n- If value is number, the loader will default to css unit `px`.\n- If value is string, the loader will verify the unit against valid css units.\n  - If unit is valid, return the original value\n  - If unit is invalid, output warning console log and default to `px`.\n\nThe table below has the default values for each loader.\n\n|            Loader | size | height | width | radius | margin |\n| ----------------: | :--: | :----: | :---: | :----: | :----: |\n|         BarLoader |      |  `4`   | `100` |        |\n|        BeatLoader | `15` |        |       |        |  `2`   |\n|      BounceLoader | `60` |        |       |        |\n|      CircleLoader | `50` |        |       |        |\n| ClimbingBoxLoader | `15` |        |       |        |\n|        ClipLoader | `35` |        |       |        |\n|       ClockLoader | `50` |        |       |        |\n|         DotLoader | `60` |        |       |        |  `2`   |\n|        FadeLoader |      |  `15`  |  `5`  |  `2`   |  `2`   |\n|        GridLoader | `15` |        |       |        |\n|        HashLoader | `50` |        |       |        |  `2`   |\n|        MoonLoader | `60` |        |       |        |  `2`   |\n|      PacmanLoader | `25` |        |       |        |  `2`   |\n|   PropagateLoader | `15` |        |       |        |\n|        PuffLoader | `60` |        |       |        |\n|       PulseLoader | `15` |        |       |        |  `2`   |\n|        RingLoader | `60` |        |       |        |  `2`   |\n|        RiseLoader | `15` |        |       |        |  `2`   |\n|      RotateLoader | `15` |        |       |        |  `2`   |\n|       ScaleLoader |      |  `35`  |  `4`  |  `2`   |  `2`   |\n|        SyncLoader | `15` |        |       |        |  `2`   |\n","readmeFilename":"README.md"}