{"id":42354426,"url":"https://github.com/filejet/filejet-sdk-js","last_synced_at":"2026-01-27T16:14:53.084Z","repository":{"id":243995357,"uuid":"813989495","full_name":"filejet/filejet-sdk-js","owner":"filejet","description":"Filejet SDK for JavaScript.","archived":false,"fork":false,"pushed_at":"2025-12-18T06:09:41.000Z","size":95,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-21T15:05:16.622Z","etag":null,"topics":["filesystem","image-processing"],"latest_commit_sha":null,"homepage":"https://filejet.io/","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/filejet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-12T06:10:36.000Z","updated_at":"2025-12-18T06:09:46.000Z","dependencies_parsed_at":"2024-06-12T12:12:33.640Z","dependency_job_id":"8a76bb03-2680-49df-9a12-588392090f03","html_url":"https://github.com/filejet/filejet-sdk-js","commit_stats":null,"previous_names":["filejet/filejet-sdk-js"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/filejet/filejet-sdk-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filejet%2Ffilejet-sdk-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filejet%2Ffilejet-sdk-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filejet%2Ffilejet-sdk-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filejet%2Ffilejet-sdk-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filejet","download_url":"https://codeload.github.com/filejet/filejet-sdk-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filejet%2Ffilejet-sdk-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28816557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T12:25:15.069Z","status":"ssl_error","status_checked_at":"2026-01-27T12:25:05.297Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["filesystem","image-processing"],"created_at":"2026-01-27T16:14:53.027Z","updated_at":"2026-01-27T16:14:53.077Z","avatar_url":"https://github.com/filejet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Filejet SDK\n\nFilejet SDK\n\n## Installation\n\n```\nyarn add @filejet/sdk\n```\n\n## Utils\n\n**Generate `\u003cimg / \u003e` attributes:**\n\nTo generate the correct `src` and `srcSet` attributes for the `\u003cimg /\u003e` tag, you can use the `filejetImg` function.\n\nIt will return urls with the correct mutations to fit your requirements.\n\n```ts\nimport { filejetImg } from '@filejet/sdk/utils';\n\nconst attributes = filejetImg({\n  src: 'https://myapp.com/image.jpg', // Either URL or file ID.\n  width: 128,\n  height: 128,\n  dpiScale: [1, 1.5, 2],\n  fit: 'cover',\n  backgroundColor: 'transparent',\n  filejetDomain: 'cdn.myapp.com',\n});\n\n// {\n//   src: '...',\n//   srcSet: '...',\n//   width: 128,\n//   height: 128\n// }\n}\nconsole.log(attributes);\n```\n\n## React\n\nTo use the Filejet integration, you need to initialize the Filejet and\nprovide it through the `\u003cFilejetProvider /\u003e`.\n\n```tsx\nimport { Filejet, FilejetProvider, LruCache } from '@filejet/sdk/react';\n\nconst filejet = new Filejet({\n  domain: 'cdn.app.com',\n  Img: {\n    dpiScale: [1, 1.5, 2],\n    placeholderNode: \u003cdiv style={{ background: '#eeeded', width: '100%', height: '100%' }}\u003e\u003c/div\u003e,\n    errorNode: (\n      \u003cdiv\n        style={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          flexDirection: 'column',\n          backgroundColor: `rgba(255,255,255, 0.4)`\n        }}\n      \u003e\n        \u003cWarningIcon color=\"primary\" /\u003e\n        Failed to load\n      \u003c/div\u003e\n    )\n  },\n  ThumbhashImg: {\n    cache: new LruCache({ maxSize: 512 }),\n    intersectRootMargin: 100\n  }\n});\n\nReactDOM.render(\n  \u003cFilejetProvider filejet={filejet}\u003e\n    \u003cApp /\u003e\n  \u003c/FilejetProvider\u003e,\n  document.getElementById('root')\n);\n```\n\n### Img component\n\n`\u003cImg\u003e` component will render the image in the most optimized way.\n\n`src` property can be either a filejet ID or HTTPs URL to external file.\n\n```tsx\nimport { Img } from '@filejet/sdk/react';\n\n\u003cImg\n  src=\"KRhBC0tycdeENyP1PQkgBA\"\n  thumbhash=\"HBkSHYSIeHiPiHh8eJd4eTN0EEQG\"\n  height={168}\n  fit=\"cover\"\n  alt=\"Photo\"\n/\u003e;\n```\n\n**Recommended usage:**\n\nIt is recommended to alway use `thumbhash` in a combination with `height` to ensure dimensions are known before the image is loaded to prevent layout shift.\n\nThumbhash encodes both the blurred placeholder and its ratio, so client can avoid layout shifts even when the ratio is not known as it can be calculated from the thumbhash.\n\n**Rendering process:**\nImage starts with the single-color placeholder calculated from the average color of thumbhash. Then, when the image is in the viewport, the original image is fetched (scaled based on DPI). If the image is in browser's cache, it is rendered immediately. If not, the blurred placeholder is rendered until the image is loaded.\n\n**Rendering priority:**\n`priority` prop can be used to prioritize the image fetching, decoding and blurred placeholder rendering. Recommended value is `auto` (default). Using `low` will lead into longer time between the single-color placeholder and the real image.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilejet%2Ffilejet-sdk-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilejet%2Ffilejet-sdk-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilejet%2Ffilejet-sdk-js/lists"}