React-image-shapes NPM

react-image-shapes

Give different shapes for your image

Install

npm install --save react-image-shapes

Usage

import React, { Component } from 'react'

import ReactImageShapes from 'react-image-shapes'

class Example extends Component {
  render() {
    return <ReactImageShapes 
        image="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" 
        width="300px"
        height="300px"
        type="cut-top-left"
        cutPercentage={20}
        mode="y"
      />
  }
}

Online demo

Demo

Props

Name	Required	Description
`image`	True	Specify the url of the image
`width`	False	Specify the width of the image. By defualt it is unset
`height`	False	Specify the height of the image. By defualt it is unset
`type`	True	Specify the type of the image (find the options in Defualt Shapes section)
`cutPercentage`	False	Specify the percentage of cut to the image (applies only at 4 type of shapes, see Default Shapes section for more details)
`mode`	False	Type 'x' if you want to cut in vertical way, Type 'y' to cut in horizontal way

Default Shapes

You can use one of the following types for your image

type	cutPercentage	mode
`cut-top-left`	Number of percentage example: 20	'x' or 'y'
`cut-top-right`	Number of percentage example: 20	'x' or 'y'
`cut-bottom-left`	Number of percentage example: 20	'x' or 'y'
`cut-bottom-right`	Number of percentage example: 20	'x' or 'y'
`triangle`	\	\
`trapezoid`	\	\
`parallelogram`	\	\
`rhombus`	\	\
`pentagon`	\	\
`hexagon`	\	\
`heptagon`	\	\
`octagon`	\	\
`decagon`	\	\
`bevel`	\	\
`rabbet`	\	\
`left-arrow`	\	\
`right-arrow`	\	\
`left-point`	\	\
`right-point`	\	\
`left-chevron`	\	\
`right-chevron`	\	\
`star`	\	\
`cross`	\	\
`message`	\	\
`close`	\	\
`frame`	\	\
`circle`	\	\
`ellipse`	\	\

Example of use:

import React, { Component } from 'react'

import ReactImageShapes from 'react-image-shapes'

class Example extends Component {
  render() {
    return <ReactImageShapes 
        image="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" 
        width="300px"
        height="300px"
        type="triangle"
      />
  }
}

License

MIT © aborova8

@everything-registry/sub-chunk-2561 @infinitebrahmanuniverse/nolb-react-im

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago