# useCookies

*Category:* Utilities
*Section:* Browser & device hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCookies
*Captured:* 2026-04-27T14:59:39.991Z

The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.

## useCookies

### Example: Cookie Name

Cookie Name

Cookie Value

Set Cookie Check Cookie Delete Cookie

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import Notification from '@rio-cloud/rio-uikit/Notification';
import useCookies from '@rio-cloud/rio-uikit/useCookies';

export default () => {
    const { setCookie, deleteCookie, hasCookie, getCookie } = useCookies();
    const [cookieName, setCookieName] = useState('uikit.demo.cookie');
    const [cookieValue, setCookieValue] = useState('I WANT COOKIES');
    const [cookieSync, setCookieSync] = useState(0);
    const cookieExists = hasCookie(cookieName);
    const currentCookieValue = getCookie(cookieName);
    const currentDomain = typeof window !== 'undefined' ? window.location.hostname : '-';

    const refreshCookieSync = () => {
        setCookieSync(prev => prev + 1);
    };

    useEffect(() => {
        const intervalId = window.setInterval(() => {
            setCookieSync(prev => prev + 1);
        }, 1000);

        return () => window.clearInterval(intervalId);
    }, []);

    const handleSetCookie = () => {
        setCookie(cookieName, cookieValue, {
            path: '/',
            maxAge: 60 * 60,
            sameSite: 'Lax',
        });
        refreshCookieSync();
        Notification.success(`Cookie "${cookieName}" wurde gesetzt.`);
    };

    const handleCheckCookie = () => {
        const exists = hasCookie(cookieName);
        refreshCookieSync();
        if (exists) {
            Notification.info(`Cookie "${cookieName}" ist gesetzt.`);
            return;
        }
        Notification.warning(`Cookie "${cookieName}" ist nicht gesetzt.`);
    };

    const handleDeleteCookie = () => {
        deleteCookie(cookieName, { path: '/' });
        refreshCookieSync();
        Notification.info(`Cookie "${cookieName}" wurde gelöscht.`);
    };

    return (
        <div className='max-width-600'>
            <div className='display-flex gap-10 flex-wrap'>
                <div className='margin-bottom-15 flex-1-1 min-width-200'>
                    <FormLabel>Cookie Name</FormLabel>
                    <ClearableInput
                        value={cookieName}
                        onChange={(newValue: string) => setCookieName(newValue)}
                        onClear={() => {
                            setCookieName('');
                            refreshCookieSync();
                        }}
                    />
                </div>
                <div className='margin-bottom-15 flex-1-1 min-width-200'>
                    <FormLabel>Cookie Value</FormLabel>
                    <ClearableInput
                        value={cookieValue}
                        onChange={(newValue: string) => setCookieValue(newValue)}
                        onClear={() => setCookieValue('')}
                    />
                </div>
            </div>
            <div className='btn-toolbar margin-bottom-15'>
                <Button onClick={handleSetCookie}>Set Cookie</Button>
                <Button onClick={handleCheckCookie}>Check Cookie</Button>
                <Button onClick={handleDeleteCookie}>Delete Cookie</Button>
            </div>
            {cookieExists && (
                <div className='alert alert-info' data-cookie-sync={cookieSync}>
                    <div>
                        <strong>Name:</strong> {cookieName}
                    </div>
                    <div>
                        <strong>Domain:</strong> {currentDomain}
                    </div>
                    <div>
                        <strong>Value:</strong> {currentCookieValue ?? '-'}
                    </div>
                </div>
            )}
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-600">
    <div class="display-flex gap-10 flex-wrap">
        <div class="margin-bottom-15 flex-1-1 min-width-200">
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Cookie Name</div>
            <div class="ClearableInput input-group">
                <input class="form-control withClearButton" type="text" tabindex="0" value="uikit.demo.cookie">
                <span class="clearButton">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
        <div class="margin-bottom-15 flex-1-1 min-width-200">
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Cookie Value</div>
            <div class="ClearableInput input-group">
                <input class="form-control withClearButton" type="text" tabindex="0" value="I WANT COOKIES">
                <span class="clearButton">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div class="btn-toolbar margin-bottom-15">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Set Cookie</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Check Cookie</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Delete Cookie</button>
    </div>
</div>
```

#### Props: Return value

### Return value

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| setCookie | (name: string, value: string, options?: CookieOptions) => void | — | Sets a cookie with optional metadata. |
| deleteCookie | (name: string, options?: Pick<CookieOptions, 'path' \| 'domain'>) => void | — | Deletes a cookie by name. |
| hasCookie | (name: string) => boolean | — | Returns true if the cookie exists. |
| getCookie | (name: string) => string \| undefined | — | Reads a cookie value. |

#### Props: CookieOptions

### CookieOptions

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| path | string | '/' | Cookie path scope. |
| domain | string | — | Cookie domain scope (for example .rio.cloud). |
| expires | Date \| string | — | Absolute expiration date for the cookie. |
| maxAge | number | — | Cookie lifetime in seconds. |
| sameSite | CookieSameSite | — | Cross-site cookie behavior. Possible values are: Strict Lax None |
| secure | boolean | — | Adds the Secure flag so the cookie is sent over HTTPS only. |