Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »


1.7.6-15 • Public • Published

Commitizen friendly

TOPADS display library in React.

This library is written in React that gives us the facility to display topads components. For now only on Tokopedia lite pages but can be extends in future for desktop as well.

This library will give you the facility to render the following templates for the topads:-

  1. CPM search (digital and product)
  2. CPC Product (search, catalog, intermediary, directory, hotlist)
  3. Feed page

To Use this library you need to follow the below steps:-

  1. install the library from npm by running the command
npm install --save topads-react


yarn add topads-react
  1. Import the module in your file from the 'topads-react' module installed in node_modules. So if you need to use CPM Template then use it like this:-
import { CPCTemplate } from '../src'

or if you need to import more then one template.

import { CPCTemplate, CPMTemplate } from '../src'

Local project Setup:-

Since we can not see the topads product on local environment due to CORS check. For this first we need to bypass the CORS on browser. We can bypass this by running the following command:-

open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:6006/ --disable-web-security

It will open a new instance of chrome browser and where we will be able to see topads product.

Now Follow the below steps to run the project on your local machine:-

1. git clone
2. yarn install or npm run install (make sure these are globally installed)
3. git checkout -b "dev_name/feature_issue/your_feature_name"
3. yarn build-storybook 
4. yarn storybook
5. Refresh the tab in browser to see the components in storybook




npm i topads-react

Downloadsweekly downloads






last publish


  • avatar
  • avatar
  • avatar
Report a vulnerability