@artifak/imagery

A basic primitive, styled image component

Usage no npm install needed!

<script type="module">
  import artifakImagery from 'https://cdn.skypack.dev/@artifak/imagery';
</script>

README

@artifak/imagery

Imagery comprises of 2 basic components you can use which are the Imagery and ImageryBase components. The docs are also available at Artifak Grid.

Installation

Yarn

yarn add @artifak/imagery

NPM

npm install @artifak/imagery

Usage

ImageryBase

ImageryBase is a basic raw component loaded with styled-components properties.

import { ImageryBase } from '@artifak/imagery';

export function Img({ src }) {
  return <Imagery src={src} display={'block'} width={'100%'} height={'auto'} />;
}

Imagery

Imagery will include basic styles and srcset and sizes attribute checks before applying them. Simply import to use and pass whatever props you may need.

import { Imagery } from '@artifak/imagery';

export function Img({ src, fit = 'contain', position = 'center' }) {
  return <Imagery src={src} objectFit={fit} objectPosition={position} />;
}