react-login-register-popup

A reusable, lightweight React modal popup for Login / Register functionality, inspired by enterprise UI patterns (Customer / Distributor / Supplier / Employee login).

Perfect for:

E-commerce websites

B2B portals

Magento PWA Studio

Admin or customer login flows

==>Features

1. Modal popup (overlay-based)

2. Login + Create Account UI

3. Fully reusable & customizable

4. UI-only (backend agnostic)

5. Zero external UI dependencies

6. Easy integration with existing auth logic

7. Publish-ready NPM package

==> Preview

The component displays:

Left panel – Create Account information

Right panel – Login form

Popup modal with overlay

Close button support

==> Installation npm install react-login-register-popup

or

yarn add react-login-register-popup

==> Peer Dependencies

Make sure your project already has:

react >= 16.8 react-dom >= 16.8

==> Basic Usage import { useState } from "react"; import LoginRegisterPopup from "react-login-register-popup";

function App() { const [open, setOpen] = useState(false);

return ( <> <button onClick={() => setOpen(true)}> Login / Register

  <LoginRegisterPopup
    open={open}
    onClose={() => setOpen(false)}
    onLogin={() => console.log("Login clicked")}
    onCreateAccount={() => console.log("Create Account clicked")}
  />
</>

); }

export default App;

==>Behavior Details

When open={false}, the component renders null

Overlay blocks background interaction

Clicking close (×) triggers onClose

Buttons only trigger callbacks – no auth logic inside

Styling is self-contained via CSS

==>Responsive Notes

Desktop-first layout

Can be extended easily for mobile using media queries

Modal width and layout are configurable via CSS