react-cookie-switch

A HOC for building a switch or checkbox to toggle a canary cookie.

tl;dr

• Install by executing npm install react-cookie-switch or yarn add react-cookie-switch.
• Import by adding import CookieSwitch from "./CookieSwitch";.
• Use by adding

  <CookieSwitch cookieName="canary">
    <input id="canary" name="canary" type="checkbox"></input>
    <label htmlFor="canary">use of our canray version</label>
  </CookieSwitch>

Demo

A minimal demo page can be found as storybook

npm run storybook

Installation

Add react-cookie-switch to your project by executing npm install react-cookie-switch or yarn add react-cookie-switch.

Usage

Here's an example of basic usage:

import React, { useEffect, useState } from "react";
import Clock from "react-cookie-switch";

function MyApp() {
  return (
    <CookieSwitch cookieName="canary">
      <input id="canary" name="canary" type="checkbox"></input>
      <label htmlFor="canary">use of our canray version</label>
    </CookieSwitch>
  );
}

User guide

Props

| Prop name | Description | Default value | Example values | | ------------------------ | ----------------------------------------------- | ------------- | ----------------------------------------------------------------------| | cookieName | Cookie name | n/a | "canary""beta""next" | | attribute | The attribute set to the children elements | checked | "checked""selected""active" | | activated | Value of the attribute and cookie if active | true | "true"1"on" | | deactivated | Value of the attribute and cookie if not active | false | "false"0"off" |

License

The MIT License.