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

or

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 https://github.com/tokopedia/topads-react.git
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