https://github.com/lukehansell/react-trackable

A trackable component to be used in conjunction with tracker.js. It adds data attributes to it's child component from context.
https://github.com/lukehansell/react-trackable

Last synced: about 2 months ago
JSON representation

A trackable component to be used in conjunction with tracker.js. It adds data attributes to it's child component from context.

• Host: GitHub
• URL: https://github.com/lukehansell/react-trackable
• Owner: lukehansell
• Created: 2015-11-19T11:55:52.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-04T11:51:49.000Z (about 9 years ago)
• Last Synced: 2023-02-28T00:26:27.684Z (almost 2 years ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-trackable

We need to be able to support Google Tag Manager in our React components. We already have a [mixin](https://github.com/holidayextras/react-data-attributes-mixin) but we want to be able to do this in a more declarative manner. This component intends to fulfil that requirement.

It uses context to pass tracking parameters down to children of children. When you pass props to a Tracking component these are then added to the context which is passed down from that instance onwards.

The Trackable component adds the tracking data to it's immediate child via props in the form of `data-[tracking-name]={[tracking-value]}`.

## installation

`npm install --save react-trackable`

## usage

    let function ToBeTracked(props) {

        return 
something cool

    }


    const class Container extend Component {

        render() {

            

                

            

        }

    }

    ReactDOM.render(, document.body)

This will output:

`
something cool
`


Because a parent component cannot affect what is rendered in a child you must provide a spread for the props in your child component in order to render the data attributes onto the elements.

A Trackable component expects one child, this is so that it does not have to render any containing `div`. Make sure all children are therefore wrapped in an appropriate container.

## test

`npm test`

## development

`npm start`

`open http://localhost:3000`