react-image-attribution

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.

Name	Type	Deafult	Description
attributionText	string,	null	Replace the attribution text with a custom text
attributionTextClassName	string	null	Class assigned to the attribution text element
attributionTextComponent	component/element	"figcaption"	Custom component or html element used for the attribution text
attributionTextStyle	any	null	Style assigned to the attribution text element
author	string,	null	Picture's author name
authorLink	string,	null	Link assigned to the author text
containerClassName	string	null	Class of the img container, not used with mode: hidden
containerComponent	component/element	"figure"	Component/element of the img container, not used with mode: hidden
containerStyle	any	null	Style of the img container, not used with mode: hidden
dataAttributes	boolean	true	If true add picture informations as data-* attributes to the img element
hover	bool	false	If true, show attribution text only when the mouse is hover the image
license	string	null	License applied to the picture
licenseLink	string	null	Link assigned to the license text
mode	"hidden"/"outside"/"overlay"	"overlay"	Mode to display the attribution text
onContainerMouseEnter	func	null	onMouseEnter listener of the img container, not used with mode: hidden
onContainerMouseLeave	func	null	onMouseLeave listener of the img container, not used with mode: hidden
position	"topleft"/"topcenter"/"topright"/"bottomleft"/"bottomcenter"/"bottomright"	"bottomright"	Position of the attribution text
source	string	null	Source of the picture
sourceLink	string	null	Link assigned to the source text
title	string	null	Title of the picture
titleLink	string	null	Link assigned to the title text

License

MIT scailbc