Quick Start

This quick guide explains how to intialize and render Tipser React Elements on your React app. It requires you to have a publisher account created in order to get the posId, as well as have some collections created in your shop here.

If you're all set up, follow this three steps to rock on your app with Tipser React Elements!

Instalation

Add the library to your project:

npm install --save @tipser/tipser-elements

❗️

For EU/UK customers please use the command npm install --save @tipser/tipser-elements@v3 instead. Elements version 4 is specific to customers in the USA.

Import Tipser Elements

The following lines of code import Tipser Elements to your React project:

import { ProductTile, TipserElementsProvider } from "@tipser/tipser-elements"; // Imports React components
import "@tipser/tipser-elements/dist/index.css"; // Imports the base set of CSS styles (can be overriden)

Below is a full example illustrating how can you combine Tipser Elements with your own application:

import React from "react";
import ReactDOM from "react-dom";
import {
  ProductTile,
  CartIcon,
  Store,
  TipserElementsProvider,
} from "@tipser/tipser-elements";
import history from "path/to/your/history"; // path to your history object that has been passed to react-router'
// import CSS files for Tipser Elements
import "@tipser/tipser-elements/dist/index.css";

// a simple Tipser Elements configuration
const config = {
  lang: "en-US",
  primaryColor: "#0000FF",
};

ReactDOM.render(
  <TipserElementsProvider
    posId="59e86b79b8f3f60a94ecd26a"
    config={config}
    history={history}
  >
    <header>
      <nav>
        Welcome to my store!
        <CartIcon />
      </nav>
    </header>
    <main>
      <ProductTile productId="5ba2334a781baa0001ccdffc" />
      <Store />
    </main>
    <footer>
      <span>This is the footer</span>
    </footer>
  </TipserElementsProvider>,
  document.getElementById("root")
);

Please make sure:

• your HTML document contains an element of id root (<div id="root"/>) so that React can mount the app to your HTML document

• to provide history object on which we can rely for client side routing, when not provided routing is based on window.history

• import CSS files (import '@tipser/tipser-elements/dist/index.css').

Also, check our configuration options.

👍

Great job! You're all set up with React Elements. For the reference of all Tipser React Elements, check below section.