react-cookie

What is react-cookie?

The react-cookie package is a library for handling cookies in React applications. It provides hooks and components to easily set, get, and remove cookies, making it simple to manage user sessions and preferences.

What are react-cookie's main functionalities?

Setting a Cookie

This feature allows you to set a cookie using the `useCookies` hook. In this example, a cookie named 'user' is set with the value 'John Doe' when the login button is clicked.

import { useCookies } from 'react-cookie';

function App() {
  const [cookies, setCookie] = useCookies(['user']);

  const handleLogin = () => {
    setCookie('user', 'John Doe', { path: '/' });
  };

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

Getting a Cookie

This feature allows you to get a cookie using the `useCookies` hook. In this example, the value of the 'user' cookie is displayed in a paragraph.

import { useCookies } from 'react-cookie';

function App() {
  const [cookies] = useCookies(['user']);

  return (
    <div>
      <p>User: {cookies.user}</p>
    </div>
  );
}

Removing a Cookie

This feature allows you to remove a cookie using the `useCookies` hook. In this example, the 'user' cookie is removed when the logout button is clicked.

import { useCookies } from 'react-cookie';

function App() {
  const [cookies, setCookie, removeCookie] = useCookies(['user']);

  const handleLogout = () => {
    removeCookie('user', { path: '/' });
  };

  return (
    <div>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
}

Other packages similar to react-cookie

js-cookie

js-cookie is a simple, lightweight JavaScript API for handling cookies. It is not specific to React but can be used in any JavaScript project. Compared to react-cookie, js-cookie requires more manual handling of cookies but offers more flexibility for non-React environments.

universal-cookie

universal-cookie is a library for handling cookies in both client and server environments. It provides a consistent API for managing cookies in JavaScript and is often used in conjunction with server-side rendering frameworks. Compared to react-cookie, universal-cookie is more versatile for isomorphic applications.

react-use-cookie

react-use-cookie is a React hook for managing cookies. It is similar to react-cookie but offers a simpler API with fewer features. It is suitable for projects that need basic cookie management without the additional functionality provided by react-cookie.

README

react-cookie

Load, save and remove cookies within your React application

Isomorphic cookies!

You can also plug it directly with a Node.js request by adding just before the renderToString: reactCookie.plugToRequest(req, res);
(require the cookieParser middleware)

If you are within a non-browser or Node.js environment, you can use reactCookie.setRawCookie(req.headers.cookie)

Download

NPM: npm install react-cookie
Bower: bower install react-cookie
CDN: https://cdnjs.cloudflare.com/ajax/libs/react-cookie/0.3.4/react-cookie.min.js

Examples

ES6

import React from 'react';
import cookie from 'react-cookie';

export default class MyApp extends React.Component {

  constructor(props) {
    super(props);
    this.state = { userId: cookie.load('userId') };
  }

  onLogin(userId) {
    this.state.userId = userId;
    cookie.save('userId', userId);
  }

  onLogout() {
    cookie.remove('userId');
  }

  render() {
    return (
      <LoginPanel onSuccess={this.onLogin.bind(this)} />
    );
  }

}

ES5

var React = require('react');
var cookie = require('react-cookie');

var MyApp = React.createClass({

  getInitialState: function() {
    return { userId: cookie.load('userId') };
  },

  onLogin: function(userId) {
    this.state.userId = userId;
    cookie.save('userId', userId);
  },

  onLogout: function() {
    cookie.remove('userId');
  },

  render: function() {
    return (
      <LoginPanel onSuccess={this.onLogin} />
    );
  }

});

module.exports = MyApp;

Without CommonJS

You can use react-cookie with anything by using the global variable reactCookie.

Note that window need to exists to use reactCookie.

Usage

reactCookie.load(name, [doNotParse])

reactCookie.save(name, val, [opt])

reactCookie.remove(name, [opt])

reactCookie.plugToRequest(req, res)

reactCookie.setRawCookie(cookies)

opt

Support all the cookie options from the RFC.

path

cookie path

expires

absolute expiration date for the cookie (Date object)

maxAge

relative max age of the cookie from when the client receives it (seconds)

domain

domain for the cookie

secure

true or false

httpOnly

true or false

License

This project is under the MIT license. You are free to do whatever you want with it.