diff --git a/README.md b/README.md index b09b2e6..9cbd9d2 100644 --- a/README.md +++ b/README.md @@ -3,49 +3,17 @@ The Tracking library for React. --- -*Work in Progress* +## Installation +1. Install it by running `npm i --save treacker` or `yarn add treacker` +2. Use it with [vanilla JS](#for+vainilla) or [React](#for-react) -## What's the challenge to solve? +## Example +You can find an example in [this codesandbox](https://codesandbox.io/s/sharp-rain-jr0m6?fontsize=14). -Tracking solutions like [React tracker](https://github.com/faouzioudouh/react-tracker#readme) or [React tracking](https://github.com/nytimes/react-tracking) solve the tracking the challenge coming for a perspective that data is present at the moment the tracking event is being triggered, meaning that the data needed to track an event is available from time 0. +## Why another tracking library? +Check [my post](https://dev.to/jepser/hello-treacker-a-tracking-library-for-react-59bd) on the practical dev. -``` jsx -const Component = ({ userId, roomId }) => { - const tracking = useTracking() - useEffect(() => { - tracking.trackEvent({ action: 'invite_sent', userId, roomId }) - }, []) - - // the rest of my component -} -``` - -But, what if because of the architecture of the application, the asyncronous nature of nowadays applications (or any other reason) you don't have `userId` or `roomId` values when mouting the component, the tracking event won't be triggered with the correct data. - -Having a condition could fix the problem: - -``` jsx -const Component = ({ userId, roomId }) => { - const tracking = useTracking() - useEffect(() => { - if(!userId || !roomId) return - tracking.trackEvent({ action: 'invite_sent', userId, roomId }) - }, [userId, roomId]) - - // the rest of my component -} -``` - -But it will needed to do this do it over and over across the application, this starts to be unmaintainable and too verbose. Instead, what if there could be a way to let the "tracking system" manage that for us, what if the data integrity is part of the responsibilities of this "tracking system". - -## The proposal - -I want to create a tool that: -- Works with vainilla JS and React is just an abstraction, so it's not dependant of React architecture constrains. -- Its responsibility is to ensure the tracking data integrity -- Provides a declarative interface -- It is agnostic of the transport service is used on the project to track the events -- Has an extensive, yet consistant interface +# Docs ## For Vainilla @@ -188,13 +156,13 @@ const Layout = ({ getUser, getRoom, rooms }) => { ...state, userId: user.id, }) - setRead(true) + setReady(true) }) getRoom() }, []) return ( - + { rooms.map(room => ) diff --git a/package.json b/package.json index 7d0ba98..fdea603 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,13 @@ "name": "treacker", "version": "0.0.0-development", "description": "A tracking library for React", + "license": "MIT", "keywords": [ "react", "tracking" ], "main": "dist/bundle.js", - "module": "dist/bundle-esm.js", + "module": "dist/bundle.esm.js", "dependencies": {}, "devDependencies": { "@babel/core": "^7.7.2", @@ -71,8 +72,6 @@ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }, - "repository": { - "type": "git", - "url": "https://github.com/jepser/treacker.git" - } + "repository": "https://github.com/jepser/treacker.git", + "author": "Jepser Bernardino " }