react-concave-polygon-mask

0.9.4 • Public • Published

React Concave Polygon Mask

npm version Dependency Status

A complex concave polygon mask for images with SVG.

A concave polygon is made up of at least four sides and at least one interior angle bigger than 180 degrees. There are limited shapes that make sense to use as a mask, currently this library only creates a single mask type. In the future I may add the ability to output a star mask.

Install

npm install react-concave-polygon-mask --save

About

This concave polygon mask will give you a interesting and responsive mask / frame over an image.

There are a few assumtions made in these early releases that in future releases will be moved into configurable settings. Such as frame counts and better color control opts.

Preview example of react-concave-polygon-mask

Props

href: PropTypes.number.isRequired

Specifies the URL of an image

width: PropTypes.number.isRequired

Specifies the width of the image

height: PropTypes.number.isRequired

Specifies the height of the image

maskColor: PropTypes.string

SVG legal color to use for the image mask. Default is white

inlay: PropTypes.number

Currently effects the image offset inside the mask. This should really be helping control the currently hardcoded difference between the multiple borders.

inset: PropTypes.number

Controls the first layer white mask around the image it's self. Measured from the outside

x: PropTypes.number

Change the SVG X offset. There should be little need to change this.

y: PropTypes.number

Change the SVG Y offset. There should be little need to change this.

Usage

import React from 'react';
import PolyMask from 'react-concave-polygon-mask';
 
export default (props) => (<div className="row">
    <div className="col-12">
        <PolyMask
            inlay={20}
            inset={48}
            href={props.url}
            width={props.width}
            height={props.height}
            maskColor="#FAFAFA"
        >
            {/* Optional SVG Children Elements https://www.w3.org/TR/SVG/ */}
            <title>{props.title}</title>
        </PolyMask>
    </div>
</div>);

Package Sidebar

Install

npm i react-concave-polygon-mask

Weekly Downloads

0

Version

0.9.4

License

MIT

Unpacked Size

9.41 kB

Total Files

6

Last publish

Collaborators

  • russbrown