npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kiwicom/cookies

v0.6.1

Published

Finally a proper cookie management system. :cookie:

Downloads

150

Readme

Cookies

Finally a proper cookie management system. :cookie:

yarn add @kiwicom/cookies

API

The API handles:

  • managing cookies
  • managing local storage
  • managing React context
  • managing 3rd party scripts
  • generating documentation

Cookies

import { Cookie, Settings, save, load, remove } from "@kiwicom/cookies";

Cookie

A TypeScript enum that contains all cookie keys. Use it when manipulating cookies.

Settings

A TypeScript / Flow type with the following keys:

  • analytics: boolean;
  • marketing: boolean;

save(key: Cookie, value: string, opts?: Options) => void

The Options object is passed to js-cookie and has these attributes:

  • domain: string
  • path: string
  • secure: boolean

Saves a cookie. Expiration is set automatically.

load(key: Cookie) => string | null

Loads a cookie.

remove(key: Cookie, opts?: Options) => void

The Options object is passed to js-cookie and has these attributes:

  • domain: string
  • path: string
  • secure: boolean

Removes a cookie.

Local storage

TODO

React context

import { Agreed, CookiesProvider, useCookies } from "@kiwicom/cookies";

Agreed

A TypeScript enum with values TRUE or FALSE that signify if consent was agreed to.

CookiesProvider

A React context provider. Props:

  • agreedInitial?: Agreed | null used for initial server-side rendering consistency

The context has the following attributes:

  • agreed: Agreed | null
  • settings: Settings
  • handleAgree(agreed: true | false) => void
  • handleChange(settings: Settings) => void

Call handleAgree when the user consents / revokes consent. Does not change settings on agreeing, so call in conjunction with handleChange.

Call handleChange when user changes his cookie preferences.

useCookies

A utility hook that retrieves the context value.

3rd party scripts

Make scripts loadable via HTTP requests, then create <script /> tags with attributes:

  • src pointing to the script's URL
  • type of "text/plain"
  • data-cookiescript with value of "necessary" | "analytics" | "marketing"

The scripts will be loaded and executed on demand, based on the user's cookie settings.

Documentation

Load the @kiwicom/cookies/cookies.json file for a list of objects with the following signature:

type Cookie = {
  name: string;
  category: string;
  type: "cookie"; // for now
  description: string;
};

License

MIT