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 onwindow.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.
Updated 11 months ago