@solid-primitives/cookies

@solid-primitives/cookies

A set of primitives for handling cookies in solid

• createServerCookie - Provides a getter and setter for a reactive cookie, which works isomorphically.
• createUserTheme - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
• getCookiesString - A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server

Installation

npm install @solid-primitives/cookies
# or
yarn add @solid-primitives/cookies
# or
pnpm add @solid-primitives/cookies

How to use it

createServerCookie

A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.

import { createServerCookie } from "@solid-primitives/cookies";

const [cookie, setCookie] = createServerCookie("cookieName");

cookie(); // => string | undefined

Custom serialization

Custom cookie serializers and deserializers can also be implemented

import { createServerCookie } from "@solid-primitives/cookies";

const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
  deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
  serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string
});

serverCookie(); // => string[]

createUserTheme

Composes createServerCookie to provide a type safe way to store a theme and access it on the server or client.

import { createUserTheme } from "@solid-primitives/cookies";

const [theme, setTheme] = createUserTheme("cookieName");

theme(); // => "light" | "dark" | undefined

// with default value
const [theme, setTheme] = createUserTheme("cookieName", {
  defaultValue: "light",
});

theme(); // => "light" | "dark"

getCookiesString

A primitive that allows for the cookie string to be accessed isomorphically on the client, or on the server. Uses getRequestEvent on the server and document.cookie on the client.

import { getCookiesString, parseCookie } from "@solid-primitives/cookies";

const string = getCookiesString();
const cookie = parseCookie(string, "cookie_name");

Examples

PRs welcome :)

Demo

You can view a demo of this primitive here: https://codesandbox.io/p/sandbox/amazing-easley-wqk38i?file=%2Fsrc%2Fcookies_primitive%2Findex.ts%3A36%2C20

Changelog

See CHANGELOG.md