{"id":18605806,"url":"https://github.com/bernabe9/react-session-persist","last_synced_at":"2025-05-17T09:42:41.911Z","repository":{"id":39179928,"uuid":"194597702","full_name":"bernabe9/react-session-persist","owner":"bernabe9","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T14:42:20.000Z","size":2369,"stargazers_count":0,"open_issues_count":66,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-18T02:15:23.865Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bernabe9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-01T04:07:45.000Z","updated_at":"2020-07-18T16:25:02.000Z","dependencies_parsed_at":"2022-09-17T13:00:35.360Z","dependency_job_id":null,"html_url":"https://github.com/bernabe9/react-session-persist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Freact-session-persist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Freact-session-persist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Freact-session-persist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Freact-session-persist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bernabe9","download_url":"https://codeload.github.com/bernabe9/react-session-persist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254595853,"owners_count":22097649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T02:23:10.426Z","updated_at":"2025-05-17T09:42:41.878Z","avatar_url":"https://github.com/bernabe9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Session Persist :key: :floppy_disk:\n\nKeep your session sync with your storage and React components.\n\n[LIVE EXAMPLE](https://bpmup.codesandbox.io)\n\n## Installation\nyarn: `yarn add react-session-persist`\n\nnpm: `npm install react-session-persist --save`\n\n\n## Usage\n\n- Wrap your app with the Session component\n```javascript\nimport { render } from 'react-dom';\nimport Session from 'react-session-persist';\n\nrender(\n  \u003cSession\u003e\n    \u003cApp /\u003e\n  \u003c/Session\u003e,\n  document.getElementById('app')\n);\n```\n- Use the hook to get and handle the session inside React components\n```javascript\nimport React from 'react';\nimport { useSession } from 'react-session-persist';\n\nconst MyComponent = () =\u003e {\n  const { authenticated, saveSession } = useSession();\n  \n  const login = () =\u003e {\n    saveSession({ token: '123' });\n  }\n  \n  if (authenticated) {\n    return \u003cp\u003eUser logged in!\u003c/p\u003e\n  }\n  \n  return \u003cbutton onClick={login}\u003eLOG IN\u003c/button\u003e\n}\n```\n- Use the API to handle the session anywhere\n```javascript\nimport { saveSession } from 'react-session-persist';\n\nconst loginUser = (user) =\u003e {\n  const session = await loginRequest(user);\n  await saveSession(session);\n}\n```\n\n## Session\nThis component wraps the app to keep the internal session state in sync with the storage.\n\n### Props\n| Prop  | Default | Description |\n| ------------- | -------------- | ------------- |\n| storage | cache storage | Custom storage, it allows a simple storage or an async storage |\n| initialData | `undefined` | Optional session data. Useful if your storage is async and you want an immediate start of your app or for SSR |\n\n\n## useSession hook\nThe hook consumes the session data and methods that the Session component provides through the context.\n\n```javascript\n{\n  session, // object with session data\n  authenticated, // boolean flag to check if the user is authenticated\n  user, // optional object with user data\n  saveSession, // promise to save the session\n  removeSession, // promise to remove the session\n  saveUser, // promise to save optional user data\n  loadDataFromStorage // get data directly from the storage\n} = useSession()\n```\n\n## API\n### getSession() : object\nReturns the current session if exists. Otherwise, it returns `undefined`.\n\nExample:\n```javascript\nimport { getSession } from 'react-session-persist';\n\nconst session = await getSession();\n```\n\n### saveSession(session: object): Promise\nSaves the session in the storage and React state. Also, it updates the authenticated flag to `true`.\n\n### removeSession(): Promise\nRemoves the session from the stores and React state. Also, it updates the authenticated flag to `false`.\n\n### getUser() : object\nReturns the optional user data if exists. Otherwise, it returns `undefined`.\n\n### saveUser(user: object): Promise\nSaves optional user data (user's name, email, etc) in the storage and React state. Also, it updates the authenticated flag to `true`.\n\n### getAuthenticated(): boolean\nReturns a boolean flag that is `true` if there is a session in the storage.\n\n### loadDataFromStorage(): Promise\\\u003cobject\\\u003e\nGets the data directly from the storage.\n\n## Custom Storage\nYou can create your own storage just providing an object with 3 methods:\n\n```javascript\nconst storage = {\n  getItem(key: string): Promise? or object,\n  setItem(key: string, data: object): Promise? or void,\n  removeItem(key: string): Promise? or void\n}\n```\n\nEach method could return a promise or value. If a method returns a promise the storage is consider an async storage.\n\nBy default `react-redux-persist` uses the cache storage.\n\n### Async Storage\nCheck out the [async example](https://github.com/bernabe9/react-session-persist/tree/master/examples/async-storage) to use another storage, this example uses [localForage](https://github.com/localForage/localForage).\n\n### React Native Storage\n\n## SSR\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernabe9%2Freact-session-persist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernabe9%2Freact-session-persist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernabe9%2Freact-session-persist/lists"}