react-image-attribution
v1.0.0
Published
Easily add attribution info to your images
Downloads
4
Readme
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