react-style-size

1.0.2 • Public • Published

react-style-size

give your component height and width base on some specific component's or viewport's height and width

installation

npm :-

npm install react-style-size

yarn :-

yarn add react-style-size

functionality

  1. give height and width to your component related with viewport size

Functions :

vh() :

Use for provide height related to viewport height.

syntax is: vh(percentage)

import { vh } from "react-style-size";

<div style={{height:vh(90)}}>example</div> 

vw() :

Use for provide width related to viewport width.

syntax is: vw(percentage)

import { vw } from "react-style-size";

<div style={{width:vw(90)}}>example</div> 

Example of usage :

import React from 'react';
import ReactDOM from 'react-dom';
import { vh,vw } from "react-map-location";


const = App() => {

return(
<div style={{height:vh(90),width:vw(100)>
<div style={{width:vw(20)>keyur kakadiya</div>
<div style={{height:vh(50)>react-style-size</div>
</div>
);
}


ReactDOM.render(
  <>
    <App />
  </>,
  document.getElementById('root')
);
<<<<<<< HEAD

=======

>>>>>>> cf2923ce23238ef900657a5ffc6e56fce12a2528

Package Sidebar

Install

npm i react-style-size

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

3.63 kB

Total Files

3

Last publish

Collaborators

  • keyurkakadiya53