0.0.2 • Published 5 years ago
react-js-x-ray v0.0.2
react-js-x-ray
Install
npm i react-js-x-ray
Documentation
Default options
| Props | Value |
|---|---|
| backgroundColor | "transparent" |
| type | "circle" |
| beyond | false |
| diameter | 150 |
| responsive | false |
| cursor | true |
| resize | {screen: 1199,diameter: 130},{screen: 991,diameter: 100},{screen: 767,diameter: 80},{screen: 575,diameter: 50} |
Prototype and values
| Props | Type | Value |
|---|---|---|
| backgroundColor | String | "transparent" or color |
| type | String | "circle" or "magnifyingGlass" |
| beyond | Boolean | true or false |
| diameter | Number | exp 150 (size circle) |
| responsive | Boolean | true or false |
| cursor | Boolean | true or false |
| resize | Array => object | { screen: 1199, diameter: 50}, ..., { screen: number, diameter: number} |
Example
import React from 'react';
import XRay from 'react-js-x-ray';
import img1 from './img/1.png';
import img2 from './img/2.png';
.........
.........
.........
<XRay
images={
[img1, img2]
}
beyond={false}
diameter={100}
cursor={true}
responsive={true}
type={'circle'}
backgroundColor={'#00AAFF'}
resize={[
{
screen: 1199,
diameter: 100
},
{
screen: 991,
diameter: 50
}
]}
/>