Hook que retorna uma função para abrir o modal de preferências de forma programática.
Uma função estável que abre o modal de preferências quando chamada
Este hook oferece uma maneira ReactJS-idiomática de abrir o modal de preferências em qualquer lugar da aplicação. Diferente do botão flutuante padrão, permite controle total sobre quando e como o modal é acionado.
function MeuFooter() {
const abrirModal = useOpenPreferencesModal();
return (
<footer>
<a href="#" onClick={abrirModal}>
Configurações de Cookies
</a>
</footer>
);
}
import { Settings } from '@mui/icons-material';
function CustomPreferencesButton() {
const openModal = useOpenPreferencesModal();
return (
<button
onClick={openModal}
className="preferences-btn"
aria-label="Configurar cookies"
>
<Settings /> Cookies
</button>
);
}
function UserMenu() {
const openPreferences = useOpenPreferencesModal();
const [menuOpen, setMenuOpen] = useState(false);
return (
<div className="user-menu">
<button onClick={() => setMenuOpen(!menuOpen)}>
Menu ▼
</button>
{menuOpen && (
<ul>
<li><a href="/profile">Meu Perfil</a></li>
<li><a href="/settings">Configurações</a></li>
<li>
<button onClick={openPreferences}>
Preferências de Cookies
</button>
</li>
</ul>
)}
</div>
);
}
function CookieSettingsPage() {
const openModal = useOpenPreferencesModal();
const navigate = useNavigate(); // React Router
React.useEffect(() => {
// Abre modal automaticamente na página de configurações
openModal();
}, [openModal]);
const handleModalClose = () => {
// Volta para página anterior quando modal fechar
navigate(-1);
};
return <div>Configurações de cookies carregando...</div>;
}
function SmartCookieButton() {
const { consented } = useConsent();
const openPreferences = useOpenPreferencesModal();
// Se usuário já deu consentimento, mostra "Alterar"
// Se não deu consentimento, mostra "Configurar"
const buttonText = consented ? 'Alterar Preferências' : 'Configurar Cookies';
const buttonIcon = consented ? '⚙️' : '🍪';
return (
<button
onClick={openPreferences}
className={consented ? 'modify-btn' : 'setup-btn'}
>
{buttonIcon} {buttonText}
</button>
);
}
Hook para acessar e manipular o estado de consentimento do usuário.
Returns
Estado e métodos para consentimento.