React kar Glassmorphism
- We are facing some problem related to babel.
- so this package is currently not compatible with CRA.
- You can use this package on codesandbox
We provide 3 React components :
- Gdiv - A modified HTML div Element
- Ginput - A modified HTML input Element
- Gbutton - A modified HTML button Element
start using this package by running
npm i react-kar-glassmorphism
Gdiv
The modified HTML div Element for glassmorphism
import {Gdiv} from 'react-kar-glassmorphism';
const App = () => {
return (
<Gdiv/>
);
}
The most commonly used props are:
- minWidth
- minHeight
- border
- background
- borderRadius
- padding
The list of all props that can be passed to this react component are :
- minWidth, minHeight, width, height, zIndex, border, background, borderRadius, backdropFilter, fontFamily, boxShadow, padding
- You can use any css property as props aslong they are in js fromat (camelcase).
- For things like hover, focus etc you can use classes and ids. These can be passed as props to this react component.
Ginput
The modified HTML div Element for glassmorphism
import {Ginput} from 'react-kar-glassmorphism';
const App = () => {
return (
<Ginput placeholder='name' stateValue={first} stateFunction={setFirst}/>
);
}
The most commonly used props are:
- placeholder
- stateValue
- stateFunction
The list of all props that can be passed to this react component are :
- placeholder, stateValue, stateFunction, width, zIndex, border, background, borderRadius, fontFamily, padding, color
- You can use any css property as props aslong they are in js fromat (camelcase).
- For things like hover, focus etc you can use classes and ids. These can be passed as props to this react component.
Gbutton
The modified HTML div Element for glassmorphism
import {Gbutton} from 'react-kar-glassmorphism';
const App = () => {
return (
<Gbutton/>
);
}
The most commonly used props are:
- minWidth
- minHeight
- border
- background
- borderRadius
- padding
- color
The list of all props that can be passed to this react component are :
- minWidth, minHeight, zIndex, border, background, borderRadius, backdropFilter, fontFamily, boxShadow, padding, color
- You can use any css property as props aslong they are in js fromat (camelcase).
- For things like hover, focus etc you can use classes and ids. These can be passed as props to this react component.
usecases
you can also pass childrens inside props.
App.js
import React,{useState,useEffect} from 'react';
import { Gdiv,Gbutton,Ginput } from 'react-kar-glassmorphism';
import './App.css';
const App = () => {
const [first, setFirst] = useState('');
useEffect(() => {
console.log(first);
}, [first]);
return (
// Gdiv has a child Ginput
<Gdiv minWidth='10rem' minHeight='10rem' zIndex='1' border='1px solid white' background='rgba(255,255,255,.2)' borderRadius='0.5rem' backdropFilter='blur(0.2rem)' fontFamily='monospace' boxShadow='2px 2px 4px black' padding='0.7rem'>
<Ginput/>
</Gdiv>
// Gbutton has a text as child
<Gbutton minWidth='5rem' minHeight='3rem' zIndex='1' border='1px solid white' background='rgba(255,255,255,.1)' borderRadius='0.3rem' backdropFilter='blur(0.5rem)' fontFamily='monospace' boxShadow='2px 2px 5px black' padding='0.7rem' className='btn' color='white'>
lol
</Gbutton>
// Ginput has react state and statefunction as props
<Ginput placeholder='name' stateValue={first} stateFunction={setFirst} id='inputId'/>
);
}
App.css
.btn:hover {
background: red !important; /* have to use !important as we want to change some inline css which has highest priority */
}
#inputId{
font-weight: 500;
}