SalesNotifications Component
The SalesNotifications component is a React component that displays animated notifications of recent purchases. It's designed to create a sense of social proof and urgency by showing random country purchases at regular intervals.
Importing the Component
To use the SalesNotifications component in your React application, import it as follows:
import { SalesNotifications } from '@/components/SalesNotifications';
Basic Usage
Here's a basic example of how to use the SalesNotifications component:
import { SalesNotifications } from '@/components/SalesNotifications';
const App = () => {
return (
<div>
{/* Your other components */}
<SalesNotifications />
</div>
);
};
Functionality
The SalesNotifications component provides the following functionality:
- Displays a notification showing a random country where a purchase was made.
- Shows how many hours ago the purchase was made (randomly generated).
- Animates the notification in and out of view at regular intervals.
- Uses a "Verified" badge to add credibility to the notification.
State Management
The component uses React's useState
hook to manage three pieces of state:
const [country, setCountry] = useState(getRandomCountry);
const [hoursAgo, setHoursAgo] = useState(getRandomHoursAgo);
const [isVisible, setVisible] = useState(false);
country
: Stores the randomly selected country name.hoursAgo
: Stores the randomly generated number of hours since the purchase.isVisible
: Controls whether the notification is currently visible.
Side Effects
The component uses the useEffect
hook to set up two intervals:
- Every 10 seconds, it updates the country and hours ago:
const countryInterval = setInterval(() => {
setCountry(getRandomCountry());
setHoursAgo(getRandomHoursAgo());
}, 10000);
- Every 5 seconds, it toggles the visibility of the notification:
const visibilityInterval = setInterval(() => {
setVisible((prev) => !prev);
}, 5000);
The effect also cleans up these intervals when the component unmounts.
Animation
The component uses Framer Motion for animations. The AnimatePresence
component ensures that exit animations are properly handled, while the motion.div
applies the following animations:
- Initial state: Opacity 0 and translated 200px to the left
- Animate state: Opacity 1 and no translation (fully visible)
- Exit state: Opacity 0 and translated 200px to the left (same as initial)
<motion.div
initial={{ opacity: 0, x: -200 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -200 }}
// ... other props
>
{/* Notification content */}
</motion.div>
Styling
The component uses Tailwind CSS for styling. Key styling features include:
- Fixed positioning at the bottom-left corner of the viewport.
- White background with a border and shadow for visibility.
- Rounded corners for a modern look.
- Custom text colors for branding (
text-brand-600
). - Flexible layout using flexbox.
Customization
To customize the SalesNotifications component:
- Modify the
countries
array to include or exclude specific countries. - Adjust the interval timings in the
useEffect
hook for more or less frequent updates. - Modify the Tailwind CSS classes to change the appearance of the notification.
- Update the text content or structure of the notification message.
- Replace the
IoShieldCheckmarkSharp
icon with a different icon if desired.
Accessibility
To improve accessibility:
- Consider adding an
aria-live
region to announce new notifications to screen readers. - Ensure sufficient color contrast for text elements, especially the gray text.
- Add a visually hidden text description for the checkmark icon.
Best Practices and Improvements
- Consider making the component more configurable by accepting props for intervals, countries, and styling.
- Implement a way to disable the notifications or adjust their frequency based on user preferences.
- Add error boundaries to handle potential issues with random selections.
- Optimize performance by using
useMemo
for the random selection functions if they become more complex. - Consider adding a way to track actual sales data instead of using random generation for production use.
Example Usage in a Layout
Here's an example of how you might use the SalesNotifications component in a layout:
import { SalesNotifications } from '@/components/SalesNotifications';
const Layout = ({ children }) => {
return (
<div className='min-h-screen'>
<header>{/* Your header content */}</header>
<main>{children}</main>
<footer>{/* Your footer content */}</footer>
<SalesNotifications />
</div>
);
};
export default Layout;
This example demonstrates how to include the SalesNotifications component in a layout, ensuring it appears on all pages that use this layout.
By using the SalesNotifications component, you can add dynamic, animated sales notifications to your React application, potentially increasing user engagement and creating a sense of active product demand. Remember to customize the content and styling to match your specific brand and product offerings.