https://github.com/gilbarbara/react-web-session
Keep user data between visits
https://github.com/gilbarbara/react-web-session
Last synced: 9 months ago
JSON representation
Keep user data between visits
- Host: GitHub
- URL: https://github.com/gilbarbara/react-web-session
- Owner: gilbarbara
- Created: 2017-11-16T21:13:39.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2021-07-12T04:50:39.000Z (over 4 years ago)
- Last Synced: 2025-04-10T14:34:28.629Z (9 months ago)
- Language: TypeScript
- Homepage: https://k5013n0n35.codesandbox.io/
- Size: 1.27 MB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-web-session
[](https://www.npmjs.com/package/react-web-session) [](https://travis-ci.org/gilbarbara/react-web-session) [](https://codeclimate.com/github/gilbarbara/react-web-session/maintainability) [](https://codeclimate.com/github/gilbarbara/react-web-session/test_coverage)
> A React wrapper for [web-session](https://github.com/gilbarbara/web-session).
How many sessions does it take for a user to create an account or purchase something?
Now you can track these metrics!
***What is a session anyway?***
This is how a web session is defined by Google Analytics:
```
a period of time (30 minutes by default) that is extended automatically upon user interaction.
```
***How does it end?***
- after 30 minutes of inactivity.
- at midnight (based on your GA settings, not client timezone).
- campaign query change (utm or gclid)
## Usage
```bash
npm install --save react-web-session
```
And require it in your root component
```typescript jsx
import WebSession from 'react-web-session';
const App = () => (
...
);
```
[](https://codesandbox.io/s/n40w8w88jl)
## Props
Type Definition
```typescript
type AnyObject = Record;
type NarrowPlainObject = Exclude any)>;
interface Origin {
createdAt: string;
href: string;
referrer: string;
}
interface Session {
current: CurrentSession;
data?: AnyObject;
history: Origin[];
origin: Origin;
visits: number;
}
```
```typescript
interface Props {
/*
* A function called on every update with the session data.
* @default noop
*/
callback?: (session: Session) => void;
/**
* A render props function or component
*/
children?: ReactNode | ((session: Session, history: History) => ReactNode);
/*
* The session data
*/
data?: AnyObject;
/*
* The session duration in minutes
* @default 30
*/
duration?: number;
/**
* An instance of `createBrowserHistory` from the history module.
* @default an instance of createBrowserHistory
*/
history?: History;
/*
* The max history size
* @default 50
*/
historySize?: number;
/*
* The session name
* @default 'WebSessionData'
*/
name?: string;
/*
* The session timezone used in GA
* @default 'UTC'
*/
timezone?: string;
}
```
### Session data
```typescript
({
origin: {
createdAt: '2000-01-01T00:15:00.000Z',
href: '/',
referrer: ''
},
current: {
campaign: {},
expiresAt: '2000-01-01T00:15:00.000Z',
href: '/',
referrer: ''
},
data: { // if using the optional data parameter with update
something: true
},
history: [ // the different campaigns the user has entered in your site
{
createdAt: '2000-01-01T00:15:00.000Z',
href: '/cpc?utm_source=cpc',
referrer: ''
}
],
visits: 1
})
```
### References
[Counting web sessions with JavaScript](https://swizec.com/blog/counting-web-sessions-javascript/swizec/7598) by @Swizec
[How a web session is defined in Analytics](https://support.google.com/analytics/answer/2731565?hl=en)