A CSS-in-JS library for React applications that enables you to apply a beautiful frosty glass effect to your components
with ease. This library utilizes styled-components
to provide a global style injection that can be customized to fit
your design needs.
First, ensure you have styled-components
installed in your project. If not, you can add it with npm:
npm install styled-components
Then, install frosty-window-effect
:
npm install frosty-window-effect
To use the frosty effect in your application, follow these steps:
- Import
FrostyWindowEffect
from the library. - Use the
FrostyWindowEffect
styled component to wrap your application or components. - Apply the
frosty
class to any element you want to add the effect to.
Here's a quick example to get you started:
import React from 'react';
import { FrostyWindowEffect } from 'frosty-window-effect';
function App () {
return (
<>
<FrostyWindowEffect/>
<div className="frosty">
This div will have a frosty glass effect!
</div>
</>
);
}
export default App;
As of now, the frosty effect is applied with fixed styles. To customize these styles, you would need to adjust the CSS directly in the library's source code. Future versions may support customizable options.
Contributions are welcome! If you have ideas on how to improve frosty-window-effect
or add new features, please feel
free to contribute. You can do so by:
- Forking the repository.
- Creating a new branch for your feature or fix.
- Making your changes.
- Submitting a pull request.
We look forward to seeing your contributions and suggestions!
frosty-window-effect
is released under the MIT license. See the LICENSE file for more details.