https://github.com/dev-ashishranjan/react-kar-glassmorphism
A npm package repo
https://github.com/dev-ashishranjan/react-kar-glassmorphism
glassmorphism-css npm-package react
Last synced: 2 months ago
JSON representation
A npm package repo
- Host: GitHub
- URL: https://github.com/dev-ashishranjan/react-kar-glassmorphism
- Owner: dev-AshishRanjan
- Created: 2023-02-17T21:49:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-02T14:34:25.000Z (over 3 years ago)
- Last Synced: 2025-10-26T06:57:06.354Z (8 months ago)
- Topics: glassmorphism-css, npm-package, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-kar-glassmorphism
- Size: 412 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://codesandbox.io/s/beautiful-wing-kf8o5i?file=/src/App.js)
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
```shell
npm i react-kar-glassmorphism
```
## Gdiv
The modified HTML div Element for glassmorphism
```jsx app.js
import {Gdiv} from 'react-kar-glassmorphism';
const App = () => {
return (
);
}
```
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
```jsx app.js
import {Ginput} from 'react-kar-glassmorphism';
const App = () => {
return (
);
}
```
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
```jsx app.js
import {Gbutton} from 'react-kar-glassmorphism';
const App = () => {
return (
);
}
```
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
```jsx 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
// Gbutton has a text as child
lol
// Ginput has react state and statefunction as props
);
}
```
App.css
```css 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;
}
```