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.

_{Built with ❤️ by T.Karthik Surya}