🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-mixpanel-browser
Advanced tools
react-mixpanel-browser - npm Package Compare versions
Comparing version 3.3.0 to 4.0.0
108
package.json
| { | ||
| "name": "react-mixpanel-browser", | ||
| "version": "3.3.0", | ||
| "description": "React providers for mixpanel-browser using the Context API.", | ||
| "browserslist": { | ||
| "node": [ | ||
| "node 18" | ||
| ], | ||
| "production": [ | ||
| "defaults" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "mixpanel-browser": "2" | ||
| }, | ||
| "description": "React hook for [mixpanel-browser](https://www.npmjs.com/package/mixpanel-browser).", | ||
| "devDependencies": { | ||
| "@types/mixpanel-browser": "2", | ||
| "@types/node": "18", | ||
| "@types/react": "18", | ||
| "@typescript-eslint/eslint-plugin": "6", | ||
| "@typescript-eslint/parser": "6", | ||
| "browserslist": "4", | ||
| "esbuild": "0", | ||
| "esbuild-plugin-browserslist": "0", | ||
| "eslint": "8", | ||
| "eslint-config-prettier": "8", | ||
| "eslint-import-resolver-typescript": "3", | ||
| "eslint-plugin-compat": "4", | ||
| "eslint-plugin-import": "2", | ||
| "eslint-plugin-react": "7", | ||
| "eslint-plugin-react-hooks": "4", | ||
| "husky": "8", | ||
| "lint-staged": "13", | ||
| "prettier": "3", | ||
| "react": "18", | ||
| "rimraf": "5", | ||
| "ts-node": "10", | ||
| "typescript": "5" | ||
| }, | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "require": "./dist/index.cjs", | ||
| "default": "./dist/index.js" | ||
| } | ||
| }, | ||
| "files": [ | ||
| "./dist/" | ||
| ], | ||
| "homepage": "https://github.com/apancutt/react-mixpanel-browser#readme", | ||
| "keywords": [ | ||
@@ -9,37 +53,33 @@ "react", | ||
| ], | ||
| "homepage": "https://github.com/apancutt/react-mixpanel-browser#readme", | ||
| "bugs": { | ||
| "url": "https://github.com/apancutt/react-mixpanel-browser/issues" | ||
| }, | ||
| "author": "Adam Pancutt <adam@pancutt.com>", | ||
| "license": "MIT", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/apancutt/react-mixpanel-browser.git" | ||
| "lint-staged": { | ||
| "**/*.(md|json)": "yarn run format", | ||
| "**/*.(cjs|mjs|js|jsx|ts|tsx)": [ | ||
| "yarn run format", | ||
| "yarn run lint" | ||
| ] | ||
| }, | ||
| "main": "dist/cjs.js", | ||
| "module": "dist/es.js", | ||
| "dependencies": { | ||
| "@babel/runtime": "7", | ||
| "mixpanel-browser": "2" | ||
| "main": "./dist/index.cjs", | ||
| "name": "react-mixpanel-browser", | ||
| "packageManager": "yarn@3.6.1", | ||
| "peerDependencies": { | ||
| "react": "18" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "7", | ||
| "@babel/plugin-transform-runtime": "7", | ||
| "@babel/preset-react": "7", | ||
| "@rollup/plugin-babel": "5", | ||
| "@rollup/plugin-commonjs": "22", | ||
| "@rollup/plugin-node-resolve": "13", | ||
| "react": "18", | ||
| "react-scripts": "5", | ||
| "rollup": "2" | ||
| }, | ||
| "repository": "apancutt/react-mixpanel-browser", | ||
| "scripts": { | ||
| "eslint": "eslint src/**/*.js", | ||
| "build": "rollup -c", | ||
| "build:watch": "rollup -w -c" | ||
| "build": "rimraf ./dist && yarn exec ./bin/build.ts", | ||
| "eslint": "eslint --ext '.cjs,.mjs,.js,.jsx,.ts,.tsx'", | ||
| "lint": "yarn run eslint --fix", | ||
| "lint:all": "yarn run lint .", | ||
| "format": "yarn run prettier --write", | ||
| "format:all": "yarn run format .", | ||
| "postinstall": "husky install", | ||
| "prepack": "yarn run build", | ||
| "prettier": "prettier --ignore-path ./.eslintignore", | ||
| "publish:major": "yarn version major && yarn npm publish", | ||
| "publish:minor": "yarn version minor && yarn npm publish", | ||
| "publish:patch": "yarn version patch && yarn npm publish" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "react-app" | ||
| } | ||
| } | ||
| "type": "module", | ||
| "version": "4.0.0" | ||
| } |
106
README.md
@@ -5,83 +5,71 @@ # react-mixpanel-browser | ||
| Provides a `MixpanelLib` instance via the context API. | ||
| Provides a `Mixpanel` instance via the context API. | ||
| ## Installation | ||
| Install the package using NPM or Yarn: | ||
| ### NPM | ||
| npm install --save react-mixpanel-browser | ||
| # or | ||
| # yarn add react-mixpanel-browser | ||
| ```sh | ||
| npm install --save react-mixpanel-browser | ||
| ``` | ||
| Add your Mixpanel token to `./.env`: | ||
| ### Yarn | ||
| REACT_APP_MIXPANEL_TOKEN=<token> | ||
| ```sh | ||
| yarn add react-mixpanel-browser | ||
| ``` | ||
| ## Usage | ||
| ### `MixpanelProvider` Component | ||
| ### `MixpanelProvider` | ||
| import React from 'react'; | ||
| import { MixpanelProvider } from 'react-mixpanel-browser'; | ||
| Wrap your application with the `<MixpanelProvider />` component: | ||
| const App = (props) => ( | ||
| <MixpanelProvider> | ||
| ... | ||
| </MixpanelProvider> | ||
| ); | ||
| ```ts | ||
| import { MixpanelProvider } from 'react-mixpanel-browser'; | ||
| export default App; | ||
| // [OPTIONAL] Set your Mixpanel token. It is up to you how this token is obtained (e.g. via env | ||
| // var). If `token` is `undefined` or otherwise falsey then `useMixpanel()` will return | ||
| // `undefined` which can be useful for environments where Mixpanel integration is not desired. | ||
| const MIXPANEL_TOKEN = 'MyToken'; | ||
| ### `useMixpanel` Hook | ||
| // [OPTIONAL] Custom options to pass to `mixpanel.init()`. | ||
| const MIXPANEL_CONFIG = { | ||
| // track_pageview: true, // Set to `false` by default | ||
| }; | ||
| import React from 'react'; | ||
| import { useMixpanel } from 'react-mixpanel-browser'; | ||
| const App = (props) => ( | ||
| <MixpanelProvider config={MIXPANEL_CONFIG} token={MIXPANEL_TOKEN}> | ||
| {/* ... */} | ||
| </MixpanelProvider> | ||
| ); | ||
| const Dashboard = (props) => { | ||
| export default App; | ||
| ``` | ||
| const mixpanel = useMixpanel(); | ||
| ### `useMixpanel()` | ||
| if (mixpanel.config.token) { // Check that a token was provided (useful if you have environments without Mixpanel) | ||
| mixpanel.track('My Event', { | ||
| my_custom_prop: 'foo', | ||
| }); | ||
| } | ||
| Call the `useMixpanel()` hook when you need to interact with Mixpanel: | ||
| return ( | ||
| <> | ||
| ... | ||
| </> | ||
| ); | ||
| ```ts | ||
| import { useMixpanel } from 'react-mixpanel-browser'; | ||
| }; | ||
| const Dashboard = (props) => { | ||
| const mixpanel = useMixpanel(); | ||
| export default Dashboard; | ||
| useEffect(() => { | ||
| if (!mixpanel) { | ||
| // Will be `undefined` if a token was not provided to `MixpanelProvider` | ||
| return; | ||
| } | ||
| ### `withMixpanel` High-Order Component | ||
| mixpanel.track('DashboadView', { | ||
| my_custom_prop: 'foo', | ||
| }); | ||
| }, [mixpanel]); | ||
| import React, { Component } from 'react'; | ||
| import { withMixpanel } from 'react-mixpanel-browser'; | ||
| return <div>Dashboard</div>; | ||
| }; | ||
| class Dashboard extends Component { | ||
| render() { | ||
| const { mixpanel } = this.props; | ||
| if (mixpanel.config.token) { // Check that a token was provided (useful if you have environments without Mixpanel) | ||
| mixpanel.track('My Event', { | ||
| my_custom_prop: 'foo', | ||
| }); | ||
| } | ||
| return ( | ||
| <> | ||
| ... | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
| export default withMixpanel(Dashboard); | ||
| export default Dashboard; | ||
| ``` |
New alerts
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
12386
46.96%- Number of package files
11
22.22%- Number of low supply chain risk alerts
1
-50%- Is type module
Yes
NaNWorsened metrics
- Dev dependency count
22
144.44%- Lines of code
26
-79.53%- Number of low maintenance alerts
2
Infinity%- Number of low quality alerts
1
Infinity%- Number of lines in readme file
75
-13.79%- Number of high supply chain risk alerts
1
Infinity%- Number of medium supply chain risk alerts
1
Infinity%Dependency changes
+ Added
js-tokens@4.0.0(transitive)+ Added
loose-envify@1.4.0(transitive)+ Added
react@18.3.1(transitive)- Removed
@babel/runtime@7- Removed
@babel/runtime@7.27.1(transitive)