@keyvaluesystems/react-multi-inline-images v0.1.5
React Multi Inline Images
A customizable ready to use Multiple Inline Image stack for React
Try tweaking a dot matrix using this codesandbox link here
Installation
The easiest way to use react-multi-inline-images is to install it from npm and build it into your app with Webpack.
npm install @keyvaluesystems/react-multi-inline-images
You’ll need to install React separately since it isn't included in the package.
Usage
React Multi Inline Images can run in a very basic mode by just providing the data
like given below:
import InlineImages from '@keyvaluesystems/react-multi-inline-images';
<InlineImages
data={dataArray}
/>
The data is an array of objects with the following keys:
name
- a string that represents each user's nameavatarUrl
- a string to specify the user image
An example for data array is shown below:
const dataArray = [
{
name: 'Jon Dew',
avatarUrl: 'example.svg'
},
{
name: 'Jack'
}
];
If no avatarUrl is specified for the user, following default Image will be considered.
You can specify whether to add an elivation effect or to show name on hover with the help of 'elivateOnHover' and 'nameOnHover' prop. Even if elivateOnHover is true, the effect will only be there if the corresponding user has name specified in the data object.
<InlineImages
data={dataArray}
elivateOnHover={true}
nameOnHover={true}
/>
We can also control the distance between each user image with the help of spaceBetweenPics prop as follows.
<InlineImages
data={dataArray}
spaceBetweenPics={30}
/>
Props
Props that can be passed to the component are listed below:
Style Customizations
All the default styles provided by this package are overridable using the styles
prop.
the below code shows all the overridable styles:
<InlineImages
data={dataArray}
styles={{
Avatar: () => ({...styles}),
Name: () => ({...styles}),
ExtraValue: () => ({...styles})
}}
/>
Avatar
- overrides the avatar (user image) styleName
- overrides the user name styleExtraValue
- overrides the style of additional value displayed at last