{"id":14007113,"url":"https://github.com/mvdschee/use","last_synced_at":"2025-04-28T12:22:17.864Z","repository":{"id":65540826,"uuid":"542921754","full_name":"mvdschee/use","owner":"mvdschee","description":"Are you tired of being awesome!? get some slack with `@mvdschee/use` to lighten repetitive TS/JS methodes","archived":false,"fork":false,"pushed_at":"2024-09-18T08:33:38.000Z","size":165,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-26T10:46:51.543Z","etag":null,"topics":[],"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/mvdschee.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-29T04:44:36.000Z","updated_at":"2024-09-18T08:33:42.000Z","dependencies_parsed_at":"2024-06-19T14:02:24.996Z","dependency_job_id":"f7b99d5e-3445-4368-80d0-c304bb6f5979","html_url":"https://github.com/mvdschee/use","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"0ce3530ada6739edf4b17d89fb05d818a01fec67"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvdschee%2Fuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvdschee%2Fuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvdschee%2Fuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvdschee%2Fuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvdschee","download_url":"https://codeload.github.com/mvdschee/use/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311509,"owners_count":21569048,"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-08-10T10:01:50.049Z","updated_at":"2025-04-28T12:22:17.844Z","avatar_url":"https://github.com/mvdschee.png","language":"TypeScript","readme":"# use\n\n### ⚡️ Under heavy development. Pin your NPM version!!!! before consumption. ⚡️\n\nUseful methodes I use daily in projects.\nMost methodes you probably find in your favorite framework, but I needed something I can use everywhere.\n\n-   [vueUse](https://vueuse.org/) for Vue projects.\n-   [reactuses](https://www.reactuse.com/) for React projects.\n\nMost functions lack proper checking as this would just add more code and I don't want to bloat my code with checks.\n\nIt's all typed so you should be good to go.\n\n## Installation\n\n```bash\nyarn add @mvdschee/use\n```\n\n## Usage\n\n```js\nimport { useFetch } from \"@mvdschee/use\";\n```\n\n# Methodes\n\n### Network\n\n-   [useFetch](#useFetch) Some extra ease of use functions on top of `fetch`, like instant headers, response timing and body and query parsing.\n-   [useSWR](#useSWR) `stale-while-revalidate` always return data while updating once the time out is over.\n-   [useRetry](#useRetry) Retry useFetch a certain amount of times with a delay between each try.\n\n### DOM\n\n-   [useAvatar](#useAvatar) A colorful profile photo based on the account name.\n-   [useMarkdown](#useMarkdown) A fast and compact markdown parser. (no support for HTML)\n\n# Search\n\n-   [useSearch](#useSearch) A fast search engine with support for typos.\n\n### Style\n\n-   [useColor](#useColor) Convert a string to a hsla color.\n\n### Time\n\n-   [useCountDown](#useCountDown) Countdown displayer, in `1D2H3M4S` format.\n\n### Format\n\n-   [useTokenDisplay](#useTokenDisplay) format a number to a string display, with a max of 8 decimals.\n\n## useFetch\n\nSmall wrapper around native fetch to stringify body and parse parms as an object (not doing polyfilling)\n\nNo need for a `try catch`, this is done iternaly.\n\n```ts\n// GET request\nimport { useFetch } from '@mvdschee/use';\n\nconst { data, error } = await useFetch\u003cDataType\u003e('/api/data', {\n    baseUrl: 'https://example.com',\n    headers: {\n        'Content-Type': 'application/json',\n    },\n    // params values needs to be of type String\n    params: {\n        account: 'example',\n        filter: 'all',\n        limit: '100',\n        sort: 'desc',\n    },\n});\n\nif (error) // do something with the error\nelse {\n    // do something with the data\n}\n```\n\n```ts\n// POST request\nimport { useFetch } from '@mvdschee/use';\n\nconst { data, error } = await useFetch\u003cDataType\u003e('/api/data', {\n    baseUrl: 'https://example.com',\n    methode: 'POST',\n    headers: {\n        'Content-Type': 'application/json',\n    },\n    body: {\n        account: 'example',\n        filter: 'all',\n        limit: 100,\n        sort: 'desc',\n    },\n});\n\nif (error) // do something with the error\nelse {\n    // do something with the data\n}\n```\n\n```ts\n// All options\nimport { useFetch } from \"@mvdschee/use\";\n\nconst { data, error, header, time } = await useFetch\u003cDataType\u003e(\"/api/data\", {\n    baseUrl: \"https://example.com\",\n});\n\nconsole.log(header[\"content-type\"]); // returns the content-type header\nconsole.log(time); // returns the time it took to fetch the data\n```\n\n## useSWR\n\nSWR is a clientside caching (Stall While Revalidate) just to save some bytes\n\n```ts\nimport { useSWR } from \"@mvdschee/use\";\n\n// default timeout is 10 minutes\nawait useSWR(`unique-name`, () =\u003e getData(), 600_000);\n```\n\n## useRetry\n\nRetry useFetch a certain amount of times with a delay between each try.\n\n```ts\nimport { useRetry } from \"@mvdschee/use\";\n\nconst { data, error, header, time } = await useRetry({\n    retries: 3, // default 3\n    delay: 1000, // default 1000\n    retryOn: ({ error }) =\u003e error !== null,\n    call: () =\u003e\n        useFetch\u003cDataType\u003e(\"/api/data\", {\n            baseUrl: \"https://example.com\",\n        }),\n});\n```\n\n## useAvatar\n\nFast and beautiful dynamic avatar based on account name\n\n```ts\nimport { useAvatar } from \"@mvdschee/use\";\n\nuseAvatar(\"example\"); // returns a svg as a string\n```\n\n## useMarkdown\n\nFast and compact markdown parser\nsee [mvdschee/drawdown](https://github.com/mvdschee/drawdown) for more info\n\n```ts\nimport { useMarkdown } from \"@mvdschee/use\";\n\nuseMarkdown(\"example\"); // returns a string: \u003cp\u003eexample\u003c/p\u003e\n\n// with options (source, render as html, class)\nuseMarkdown(\"example\", true, \"class-name\"); // returns a DOM element: \u003cdiv class=\"class-name\"\u003e\u003cp\u003eexample\u003c/p\u003e\u003c/div\u003e\n```\n\n## useSearch\n\nFast search engine with support for typos\n\n```ts\nimport { useSearch } from \"@mvdschee/use\";\n\nconst search = useSearch({\n    // simple list of strings\n    items: [\"example\", \"example 2\"],\n    // OPTIONAL: sorted list of strings per first character (good for many items)\n    //  will fallback to items if no results are found to prevent empty results\n    sorted_items: {\n        a: [\"account\", \"account 2\"],\n        e: [\"example\", \"example 2\"],\n    },\n    // OPTIONAL\n    options: {\n        distance: 3, // default 3: max distance between characters in a typo\n        results_count: 8, // default 8: how many matches to return\n        results_count_alt: 32, // default 32: how many alternative results with typos to look up (caped to results_count)\n    },\n});\n\nconst result = search(\"exa\"); // returns [example', 'example 2'],\n```\n\n## useColor\n\nString to hsla color\n\n```ts\nimport { useColor } from \"@mvdschee/use\";\n\nuseColor(\"example\"); // returns a hsla color string\n```\n\n## useCountDown\n\nCountdown displayer, in DHMS format\n\n```ts\nimport { useCountDown } from \"@mvdschee/use\";\n\n// (start time, current time)\nuseCountDown(new Date().valueOf() - 1000, new Date().valueOf()); // returns 1S\n```\n\n## useTokenDisplay\n\nFormat a number to a string display, with a max of 8 decimals (default)\nand optional fixed decimals (default false)\n\n```ts\nimport { useTokenDisplay } from \"@mvdschee/use\";\n\nuseTokenDisplay(100, 2); // returns 100\n\nuseTokenDisplay(100, 2, true); // returns 100.00\n```\n\n# 💻 Development\n\n-   Clone this repository\n-   Run `pnpm install` to install dependencies\n-   Run `pnpm dev` to start the development server\n-   Run `pnpm build` to build the library\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvdschee%2Fuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvdschee%2Fuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvdschee%2Fuse/lists"}