react-datalayer

• simple declerative api
• no more propagate props just for dataLayer's purpose
• separate view layer from analytics layer
• easy to implement

before:

import React from 'react';


const ListItem = ({ id, index, name, href }) => <a href={ href } onClick={ () => dataLayer.push({ index, id, name, href }) }>{ name }</a>

const List = ({ elements }) => elements.map(({ id, name, href }, index) => {
  return (
    <ListItem { ...{name, href, index, id} }/>
  );
});

export default List;

after:

import React from 'react';

import { Tracking, provideAnalytics } from 'react-datalayer';

const ListItem = ({ onClick, name, href }) => <a href={ href } onClick={ onClick }>{ name }</a>

const List = ({ elements }) => elements
  .map(({ id, name, href }, index) => {
    return (
      <Tracking eventProperties={ () => ({ id, index, name, href }) }>
        {
          instrument => <ListItem onClick={ instrument('click') } { ...{ name, href } }/>
        }
      </Tracking>
    )
  });

export default provideAnalytics({ userId: 2 })(List);

Check out more examples and get stuck right in with the online editor.

Resources

• introducting to problem

• react-amplitude

Todos

• [ ] useAnalytics, useTracking
• [ ] ts interfaces
• [ ] storybook online
• [ ] custom dispatch definintion
• [ ] tests
• [ ] eslint