react-encrypted-reveal-button
v0.0.6
Published
encrypted reveal button on hover
Downloads
309
Maintainers
Readme
React Encrypted Reveal Button
A customizable React component that reveals encrypted content on hover.
Features
- 🔒 Encrypt sensitive information
- 👀 Reveal content on hover
- 🎨 Fully customizable styles
- 🚀 Easy to integrate
- 📦 Lightweight
Installation
npm install react-encrypted-reveal-button
# or
yarn add react-encrypted-reveal-button
Usage
import React from 'react';
import EncryptedButton from 'react-encrypted-reveal-button';
function App() {
return (
<EncryptedButton
text="Default Style"
styles={{
base: {
fontFamily: 'monospace',
padding: '10px',
fontSize: '16px',
backgroundColor: '#4CAF50',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
transition: 'all 0.3s ease',
},
hover: {
backgroundColor: '#45a049',
transform: 'scale(1.05)',
},
active: {
backgroundColor: '#3e8e41',
transform: 'scale(0.95)',
},
}}
/>
);
}
export default App;
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text
| string | - | The text to be displayed and encrypted |
| revealSpeed
| number | 50 | The speed of revealing each character (in milliseconds) |
| loop
| boolean | false | Whether to loop the encryption effect |
| styles
| object | {} | Custom styles for the button (base, hover, active) |
Customization
You can easily customize the appearance and behavior of the button:
<EncryptedButton
text="Custom Style"
styles={{
base: {
fontFamily: 'Arial, sans-serif',
padding: '15px 25px',
fontSize: '18px',
backgroundColor: '#3498db',
color: 'white',
border: '2px solid #2980b9',
borderRadius: '25px',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
transition: 'all 0.3s ease',
},
hover: {
backgroundColor: '#2980b9',
boxShadow: '0 6px 8px rgba(0, 0, 0, 0.2)',
},
active: {
backgroundColor: '#2471a3',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
transform: 'translateY(2px)',
},
}}
revealSpeed={100}
loop={true}
/>
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the ISC License - see the LICENSE file for details.
Support
If you encounter any problems or have any questions, please open an issue.