react-image-attribution v1.0.0

react-image-attribution

Easily add attribution info to your images

This package allows to add attibution info to the images and easily display them in different ways.

You can use it as a normal <img /> element or pass a custom component as child.

How to correctly attribute images

Best practices for attribution

Install

npm install --save react-image-attribution

Usage

You can use this component as the standard HTML immg tag.

import React, { Component } from 'react'

import ImageAttribution from 'react-image-attribution'

class Example extends Component {
  render() {
    return <ImageAttribution
                src="https://www.pixsy.com/wp-content/uploads/2018/03/Winter-in-town-David-J-CC-BY-2.0.jpg"
                title="Winter in town"
                author="David J"
                license="CC BY 2.0"
                mode="overlay"
            />
  }
}

You can use a custom image component:

import React, { Component } from 'react'

import ImageAttribution from 'react-image-attribution'
import CustomImage from './CustomImage'

class Example extends Component {
  render() {
    return <ImageAttribution
                title="Winter in town"
                author="David J"
                license="CC BY 2.0"
                mode="overlay"
            >
              <CustomImage
                imageLink="https://www.pixsy.com/wp-content/ uploads/2018/03/Winter-in-town-David-J-CC-BY-2.0.jpg"
              />
            </ImageAttribution>
  }
}

Props

By default the image is shown using an img HTML element. All unlinsted props will be passed to the img element.

License

MIT © scailbc