{"id":15540852,"url":"https://github.com/nejcm/react-image","last_synced_at":"2025-03-29T00:18:21.364Z","repository":{"id":57129702,"uuid":"249264339","full_name":"nejcm/react-image","owner":"nejcm","description":"React image and background image component.","archived":false,"fork":false,"pushed_at":"2021-01-16T09:19:56.000Z","size":8844,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-03T12:19:13.989Z","etag":null,"topics":["background-image","image","img","javascript","library","react","responsive"],"latest_commit_sha":null,"homepage":"https://nejcm.github.io/react-image/","language":"JavaScript","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/nejcm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-22T20:13:29.000Z","updated_at":"2021-01-16T09:11:45.000Z","dependencies_parsed_at":"2022-09-01T02:01:33.342Z","dependency_job_id":null,"html_url":"https://github.com/nejcm/react-image","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejcm%2Freact-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejcm%2Freact-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejcm%2Freact-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejcm%2Freact-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nejcm","download_url":"https://codeload.github.com/nejcm/react-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246117738,"owners_count":20726069,"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":["background-image","image","img","javascript","library","react","responsive"],"created_at":"2024-10-02T12:14:38.998Z","updated_at":"2025-03-29T00:18:21.344Z","avatar_url":"https://github.com/nejcm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🖼️ React image\n\n\u003cblockquote\u003eA simple react image and background image component with support for responsive images, fallback image, lazy loading and loader.\u003c/blockquote\u003e\n\u003cbr /\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n[![NPM][npm-badge]][npm-link] \n[![JavaScript Style Guide][style-guide-badge]][style-guide]\n\n[![Build Status][build-badge]][build]\n[![Semantic release][semantic-release-badge]][semantic-release]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n\n[![Storybook][storybook-badge]]([storybook])\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg)](#contributors)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n\u003c!-- prettier-ignore-end --\u003e\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Docs \u0026 Examples](#docs--examples)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n  - [💡 Feature Requests](#-feature-requests)\n  - [❓ Questions](#-questions)\n- [Authors](#authors)\n- [Contributors](#contributors)\n- [Support](#support)\n- [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n### Peer dependencies\n\nreact-image requires the following peer dependencies to work. Make sure to have\nthem installed in your project.\n\n\u003e You can **skip this step** if those packages are already installed in your\n\u003e project.\n\n```shell\n# with styled-components\n$ npm install react react-dom styled-components --save\n# with emotion\n$ npm install react react-dom @emotion/styled @emotion/core --save\n```\n\n### Package\n\n```shell\n# with styled-components\n$ npm install @nejcm/react-image --save\n# with emotion\n$ npm install @nejcm/react-image-emotion --save\n```\n\n## Usage\n\n```jsx\n// with styled-components\nimport {Image, BackgroundImage} from '@nejcm/react-image';\n// with emotion\nimport {Image, BackgroundImage} from '@nejcm/react-image-emotion';\n```\n\nFor more examples check the docs.\n\n## Docs \u0026 Examples\n\n\u003e [**Docs \u0026 Examples**][docs-link]\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue][good-first-issue]\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n### ❓ Questions\n\nFor questions related to using the library, please visit a support community\ninstead of filing an issue on GitHub.\n\n## Authors\n\n- Nejc Muršič ( [GitHub][github], [LinkedIn][linkedin] )\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nejcm\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1865210?v=4\" width=\"100px\" alt=\"Nejc\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNejc Muršič\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/nejcm/react-image/commits?author=nejcm\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/nejcm/react-image/commits?author=nejcm\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/nejcm/react-image/commits?author=nejcm\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## Support\n\nReach out to us at one of the following places:\n\n- [🌐 Website][website]\n- [📧 Email][email]\n\n## LICENSE\n\n[MIT](LICENSE)\n\n\u003c!-- prettier-ignore-start --\u003e\n\n[all-contributors]: https://github.com/all-contributors/all-contributors\n[bugs]: https://github.com/nejcm/react-image/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc\n[build-badge]: https://img.shields.io/travis/com/nejcm/react-image.svg\n[build]: https://travis-ci.com/nejcm/react-image\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg\n[coc]: https://github.com/nejcm/react-image/blob/master/CODE_OF_CONDUCT.md\n[coverage-badge]: https://img.shields.io/codecov/c/github/nejcm/react-image.svg\n[coverage]: https://codecov.io/github/nejcm/react-image\n[docs-link]: https://nejcm.github.io/react-image/\n[downloads-badge]: https://img.shields.io/npm/dm/@nejcm/react-image.svg\n[email]: nmursi2@gmail.com\n[emojis]: https://github.com/all-contributors/all-contributors#emoji-key\n[github]: https://github.com/nejcm\n[github-star-badge]: https://img.shields.io/github/stars/nejcm/react-image.svg?style=social\n[github-star]: https://github.com/nejcm/react-image/stargazers\n[github-watch-badge]: https://img.shields.io/github/watchers/nejcm/react-image.svg?style=social\n[github-watch]: https://github.com/nejcm/react-image/watchers\n[good-first-issue]: https://github.com/nejcm/react-image/issues?utf8=✓\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A\"good+first+issue\"+\n[license-badge]: https://img.shields.io/npm/l/@nejcm/react-image.svg\n[license]: https://github.com/nejcm/react-image/blob/master/LICENSE\n[linkedin]: https://www.linkedin.com/in/nejcm/\n[node]: https://nodejs.org\n[npm]: https://www.npmjs.com/\n[npm-badge]: https://img.shields.io/npm/v/@nejcm/react-image.svg\n[npm-link]: https://www.npmjs.com/package/@nejcm/react-image\n[npmtrends]: http://www.npmtrends.com/@nejcm/react-image\n[package]: https://www.npmjs.com/package/@nejcm/react-image\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg\n[prs]: http://makeapullrequest.com\n[requests]: https://github.com/nejcm/react-image/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen\n[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-release]: https://github.com/semantic-release/semantic-release\n[storybook-badge]: https://nejcmursic.netlify.com/assets/storybook.svg\n[storybook]: https://storybook.js.org/\n[style-guide-badge]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[style-guide]: https://standardjs.com\n[version-badge]: https://img.shields.io/npm/v/@nejcm/react-image.svg\n[website]: https://nejcmursic.com/\n\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnejcm%2Freact-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnejcm%2Freact-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnejcm%2Freact-image/lists"}