https://github.com/nejcm/react-image
React image and background image component.
https://github.com/nejcm/react-image
background-image image img javascript library react responsive
Last synced: 6 months ago
JSON representation
React image and background image component.
- Host: GitHub
- URL: https://github.com/nejcm/react-image
- Owner: nejcm
- License: mit
- Created: 2020-03-22T20:13:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-16T09:19:56.000Z (over 4 years ago)
- Last Synced: 2024-10-03T12:19:13.989Z (about 1 year ago)
- Topics: background-image, image, img, javascript, library, react, responsive
- Language: JavaScript
- Homepage: https://nejcm.github.io/react-image/
- Size: 8.43 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ๐ผ๏ธ React image
A simple react image and background image component with support for responsive images, fallback image, lazy loading and loader.
[![NPM][npm-badge]][npm-link]
[![JavaScript Style Guide][style-guide-badge]][style-guide]
[![Build Status][build-badge]][build]
[![Semantic release][semantic-release-badge]][semantic-release]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[![Storybook][storybook-badge]]([storybook])
[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Docs & Examples](#docs--examples)
- [Issues](#issues)
- [๐ Bugs](#-bugs)
- [๐ก Feature Requests](#-feature-requests)
- [โ Questions](#-questions)
- [Authors](#authors)
- [Contributors](#contributors)
- [Support](#support)
- [LICENSE](#license)
## Installation
### Peer dependencies
react-image requires the following peer dependencies to work. Make sure to have
them installed in your project.
> You can **skip this step** if those packages are already installed in your
> project.
```shell
# with styled-components
$ npm install react react-dom styled-components --save
# with emotion
$ npm install react react-dom @emotion/styled @emotion/core --save
```
### Package
```shell
# with styled-components
$ npm install @nejcm/react-image --save
# with emotion
$ npm install @nejcm/react-image-emotion --save
```
## Usage
```jsx
// with styled-components
import {Image, BackgroundImage} from '@nejcm/react-image';
// with emotion
import {Image, BackgroundImage} from '@nejcm/react-image-emotion';
```
For more examples check the docs.
## Docs & Examples
> [**Docs & Examples**][docs-link]
## Issues
_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._
### ๐ Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
[**See Bugs**][bugs]
### ๐ก Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding
a ๐. This helps maintainers prioritize what to work on.
[**See Feature Requests**][requests]
### โ Questions
For questions related to using the library, please visit a support community
instead of filing an issue on GitHub.
## Authors
- Nejc Murลกiฤ ( [GitHub][github], [LinkedIn][linkedin] )
## Contributors
Nejc Murลกiฤ
๐ป ๐ ๐ โ ๏ธ
This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!
## Support
Reach out to us at one of the following places:
- [๐ Website][website]
- [๐ง Email][email]
## LICENSE
[MIT](LICENSE)
[all-contributors]: https://github.com/all-contributors/all-contributors
[bugs]: https://github.com/nejcm/react-image/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
[build-badge]: https://img.shields.io/travis/com/nejcm/react-image.svg
[build]: https://travis-ci.com/nejcm/react-image
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg
[coc]: https://github.com/nejcm/react-image/blob/master/CODE_OF_CONDUCT.md
[coverage-badge]: https://img.shields.io/codecov/c/github/nejcm/react-image.svg
[coverage]: https://codecov.io/github/nejcm/react-image
[docs-link]: https://nejcm.github.io/react-image/
[downloads-badge]: https://img.shields.io/npm/dm/@nejcm/react-image.svg
[email]: nmursi2@gmail.com
[emojis]: https://github.com/all-contributors/all-contributors#emoji-key
[github]: https://github.com/nejcm
[github-star-badge]: https://img.shields.io/github/stars/nejcm/react-image.svg?style=social
[github-star]: https://github.com/nejcm/react-image/stargazers
[github-watch-badge]: https://img.shields.io/github/watchers/nejcm/react-image.svg?style=social
[github-watch]: https://github.com/nejcm/react-image/watchers
[good-first-issue]: https://github.com/nejcm/react-image/issues?utf8=โ&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
[license-badge]: https://img.shields.io/npm/l/@nejcm/react-image.svg
[license]: https://github.com/nejcm/react-image/blob/master/LICENSE
[linkedin]: https://www.linkedin.com/in/nejcm/
[node]: https://nodejs.org
[npm]: https://www.npmjs.com/
[npm-badge]: https://img.shields.io/npm/v/@nejcm/react-image.svg
[npm-link]: https://www.npmjs.com/package/@nejcm/react-image
[npmtrends]: http://www.npmtrends.com/@nejcm/react-image
[package]: https://www.npmjs.com/package/@nejcm/react-image
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[prs]: http://makeapullrequest.com
[requests]: https://github.com/nejcm/react-image/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release]: https://github.com/semantic-release/semantic-release
[storybook-badge]: https://nejcmursic.netlify.com/assets/storybook.svg
[storybook]: https://storybook.js.org/
[style-guide-badge]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[style-guide]: https://standardjs.com
[version-badge]: https://img.shields.io/npm/v/@nejcm/react-image.svg
[website]: https://nejcmursic.com/