stipop-sdk-test v1.1.19

STIPOP REACT SDK

STIPOP REACT SDK

Installation

stipop-react-sdk can be installed on Linux, Mac OS or Windows without any issues.

npm install --save stipop-react-sdk

Getting API Key

To use the React SDK you need your api key.

You can get the api key by signing up and creating an application in Stipop Dashboard.

Get started

SearchComponent

Sticker Search Component

• React

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
          lang: 'en',
        }}
      />
    )
  }
  
  export default App

• Next.js

  import dynamic from 'next/dynamic'
  
  const App = () => {
    const SearchComponent = dynamic(
      () => import('stipop-react-sdk/dist/SearchComponent'),
      {
        ssr: false,
      })
    
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
          lang: 'en',
        }}
      />
    )
  }
  
  export default App

List of Params

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required
  userId	string	required
  lang	string	strongly recommended	en
  countryCode	string	strongly recommended	US
  pageNumber	number	optional	1
  limit	number	optional	20 (max: 50)
  default	string	optional	hi

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
          lang: 'en',
          countryCode: 'US',
          pageNumber: 1,
          limit: 20,
          default: 'hi',
        }}
      />
    )
  }
  
  export default App

• size

  Parameters

  Name	Type	Required	Default
  width	number	optional	360
  height	number	optional	300
  imgSize	number	optional	60

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        size={{
          width: 360,
          height: 300,
          imgSize: 60,
        }}
      />
    )
  }
  
  export default App

• border

  Parameters

  Name	Type	Required	Default
  border	string	optional	1px solid lightgray
  radius	object	optional	{ leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10 }all : This parameter preferentially applies the same value to all of the corners at once.

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        border={{
          border: '1px solid lightgray',
          radius: {leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10},
        }}
      />
    )
  }
  
  export default App

• input

  Parameters

  Name	Type	Required	Default
  width	number	optional	100
  height	number	optional	32
  border	string	optional	2px solid lightgray
  radius	number	optional	50
  backgroundColor	string	optional	#fff
  color	string	optional	#000
  focus	string	optional	lightgray
  search	string	optional	#d5d5d5

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        input={{
          width: 100,
          height: 32,
          border: '2px solid lightgray',
          radius: 50,
          backgroundColor: '#fff',
          color: '#000',
          focus: 'lightgray',
          search: '#d5d5d5',
        }}
      />
    )
  }
  
  export default App

• backgroundColor

  Type	Required	Default
  string	optional	#fff

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        backgroundColor={'#fff'}
      />
    )
  }
  
  export default App

• column

  Type	Required	Default
  number	optional	4

  Examples

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        column={4}
      />
    )
  }
  
  export default App

• scroll

  Type	Required	Default
  boolean	optional	true

  Examples

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scroll={true}
      />
    )
  }
  
  export default App

• scrollHover

  Type	Required	Default
  string	optional	#6d7072

  Examples

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scroll={true}
        scrollHover={'#6d7072'}
      />
    )
  }
  
  export default App

• stickerClick

  Get Sticker URL Function

  Type	Required	Value
  Function	optional	url, stickerId, packageId

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        stickerClick={(info) => console.log(info)} // {url, stickerId, packageId}
      />
    )
  }
  
  export default App

• preview

  Type	Required	Default
  boolean	optional	false

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        preview={false}
      />
    )
  }
  
  export default App

• loadingColor

  Type	Required	Default
  string	optional	#ff4500

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        loadingColor={'#ff4500'}
      />
    )
  }
  
  export default App

• shadow

  Type	Required	Default
  string	optional	0 10px 20px 6px rgba(0, 0, 0, 0.1)

  Examples

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        shadow='0 10px 20px 6px rgba(0, 0, 0, 0.1)'
      />
    )
  }
  
  export default App

PickerComponent

Sticker Picker Component

• React

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
      />
    )
  }
  
  export default App

• Next.js

  import dynamic from 'next/dynamic'
  
  const App = () => {
    const PickerComponent = dynamic(
      () => import('stipop-react-sdk/dist/PickerComponent'),
      {
        ssr: false,
      })
    
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
      />
    )
  }
  
  export default App

List of Params

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required
  userId	string	required

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
      />
    )
  }
  
  export default App

• size

  Parameters

  Name	Type	Required	Default
  width	number	optional	360
  height	number	optional	300
  imgSize	number	optional	70

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        size={{
          width: 360,
          height: 300,
          imgSize: 70,
        }}
      />
    )
  }
  
  export default App

• border

  Parameters

  Name	Type	Required	Default
  border	string	optional	1px solid lightgray
  radius	object	optional	{ leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10 }all : This parameter preferentially applies the same value to all of the corners at once.

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        border={{
          border: '1px solid lightgray',
          radius: {leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10},
        }}
      />
    )
  }
  
  export default App

• menu

  Parameters

  Name	Type	Required	Default
  height	number	optional	45
  backgroundColor	string	optional	#fff
  bottomLine	string	optional	1px solid lightgray
  selectedLine	string	optional	2px solid black
  listCnt	number	optional	6
  arrowColor	string	optional	#000
  imgSize	number	optional	60

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        menu={{
          height: 45,
          backgroundColor: '#fff',
          bottomLine: '1px solid lightgray',
          selectedLine: '2px solid black',
          listCnt: 6,
          arrowColor: '#000',
          imgSize: 60,
        }}
      />
    )
  }
  
  export default App

• backgroundColor

  Type	Required	Default
  string	optional	#fff

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        backgroundColor={'#fff'}
      />
    )
  }
  
  export default App

• column

  Type	Required	Default
  number	optional	4

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        column={4}
      />
    )
  }
  
  export default App

• scroll

  Type	Required	Default
  boolean	optional	true

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scroll={true}
      />
    )
  }
  
  export default App

• scrollHover

  Type	Required	Default
  string	optional	#6d7072

  Examples

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scroll={true}
        scrollHover={'#6d7072'}
      />
    )
  }
  
  export default App

• stickerClick

  Get Sticker URL Function

  Type	Required	Value
  Function	optional	url, stickerId, packageId

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        stickerClick={(info) => console.log(info)} // {url, stickerId, packageId}
      />
    )
  }
  
  export default App

• storeClick

  Get Store Icon Click Status

  Type	Required	Value
  Function	optional	true

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        storeClick={(e) => console.log(e)} //true
      />
    )
  }
  
  export default App

• preview

  Type	Required	Default
  boolean	optional	false

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        preview={false}
      />
    )
  }
  
  export default App

• loadingColor

  Type	Required	Default
  string	optional	#ff4500

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        loadingColor={'#ff4500'}
      />
    )
  }
  
  export default App

• shadow

  Type	Required	Default
  string	optional	0 10px 20px 6px rgba(0, 0, 0, 0.1)

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        shadow='0 10px 20px 6px rgba(0, 0, 0, 0.1)'
      />
    )
  }
  
  export default App

StoreComponent

Sticker Store Component

• React

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
      />
    )
  }
  
  export default App

• Next.js

  import dynamic from 'next/dynamic'
  
  const App = () => {
    const StoreComponent = dynamic(
      () => import('stipop-react-sdk/dist/StoreComponent'),
      {
        ssr: false,
      })
    
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
      />
    )
  }
  
  export default App

List of Params

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required
  userId	string	required
  lang	string	strongly recommended	en
  countryCode	string	strongly recommended	US
  animated	string	optional	Y: Look for premium stickers onlyN: Look for free stickers onlyEmpty parameter: Look for all stickers
  pageNumber	number	optional	1
  limit	number	optional	20 (max: 50)

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
          lang: 'en',
          countryCode: 'US',
          animated: 'N',
          pageNumber: 1,
          limit: 20,
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
      />
    )
  }
  
  export default App

• downloadParams

  Parameters

  Name	Type	Required	Default
  isPurchase	string	required	N: Free Sticker Store Y: Paid Sticker StoreS: Sticker Subscription
  lang	string	optional	en
  countryCode	string	optional	US
  price	string	optional	if isPurchase is Y, the default price is set for stickers.Defualt Price: Still Stickers $0.99, Animated Stickers $1.99

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N',
          lang: 'en',
          countryCode: 'US',
        }}
      />
    )
  }
  
  export default App

• color

  Parameters

  Name	Type	Required	Default
  backgroundColor	stirng	optional	#fff
  packageHoverColor	string	optional	#fff
  downloadedColor	string	optional	#f5f6f6
  downloadedHoverColor	string	optional	#f5f6f6
  downloadBtn	string	optional	#ff4500
  downloadBtnHover	string	optional	#ff4500
  deleteBtn	string	optional	#b3b3b3
  deleteBtnHover	string	optional	#b3b3b3
  recoveryBtn	string	optional	#ff4500
  recoveryBtnHover	string	optional	#ff4500
  loadingColor	string	optional	#ff4500
  scrollHover	string	optional	#6d7072

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        color={{
          backgroundColor: '#fff',
          packageHoverColor: '#fff',
          downloadedColor: '#f5f6f6',
          downloadedHoverColor: '#f5f6f6',
          downloadBtn: '#ff4500',
          downloadBtnHober: '#ff4500',
          deleteBtn: '#b3b3b3',
          deleteBtnHover: '#b3b3b3',
          recoveryBtn: '#ff4500',
          recoveryBtnHover: '#ff4500',
          loadingColor: '#ff4500',
          scrollHover: '#6d7072',
        }}
      />
    )
  }
  
  export default App

• size

  Parameters

  Name	Type	Required	Default
  width	number	optional	600
  height	number	optional	400
  previewImg	number	optional	70
  detailImg	number	optional	70
  mainImg	number	optional	100
  packageListHeight	number	optional	33

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        size={{
          width: 600,
          height: 400,
          previewImg: 70,
          detailImg: 70,
          mainImg: 100,
          packageListHeight: 33,
        }}
      />
    )
  }
  
  export default App

• border

  Parameters

  Name	Type	Required	Default
  border	string	optional	1px solid lightgray
  radius	object	optional	{ leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10 }all : This parameter preferentially applies the same value to all of the corners at once.

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        border={{
          border: '1px solid lightgray',
          radius: {leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10},
        }}
      />
    )
  }
  
  export default App

• scroll

  Type	Required	Default
  boolean	optional	true

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        scroll={true}
      />
    )
  }
  
  export default App

• onClose

  Get Close Button Click Status

  Type	Required	Value
  Function	optional	true

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        onClose={(e) => console.log(e)} // true
      />
    )
  }
  
  export default App

• shadow

  Type	Required	Default
  string	optional	0 10px 20px 6px rgba(0, 0, 0, 0.1)

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParams={{
          isPurchase: 'N'
        }}
        shadow='0 10px 20px 6px rgba(0, 0, 0, 0.1)'
      />
    )
  }
  
  export default App

UnifiedComponent

Sticker Unified Component (Search + Picker Component)

• React

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
      />
    )
  }
  
  export default App

• Next.js

  import dynamic from 'next/dynamic'
  
  const App = () => {
    const UnifiedComponent = dynamic(
      () => import('stipop-react-sdk/dist/UnifiedComponent'),
      {
        ssr: false,
      })
    
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
      />
    )
  }
  
  export default App

List of Params

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required
  userId	string	required
  lang	string	strongly recommended	en
  countryCode	string	strongly recommended	US
  pageNumber	number	optional	1
  limit	number	optional	20 (max: 50)

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
          lang: 'en',
          countryCode: 'US',
          pageNumber: 1,
          limit: 20,
        }}
      />
    )
  }
  
  export default App

• size

  Parameters

  Name	Type	Required	Default
  width	number	optional	360
  height	number	optional	300
  imgSize	number	optional	60

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        size={{
          width: 360,
          height: 300,
          imgSize: 60,
        }}
      />
    )
  }
  
  export default App

• border

  Parameters

  Name	Type	Required	Default
  border	string	optional	1px solid lightgray
  radius	object	optional	{ leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10 }all : This parameter preferentially applies the same value to all of the corners at once.

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        border={{
          border: '1px solid lightgray',
          radius: {leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10},
        }}
      />
    )
  }
  
  export default App

• input

  Parameters

  Name	Type	Required	Default
  width	number	optional	100
  height	number	optional	32
  border	string	optional	2px solid lightgray
  radius	number	optional	50
  backgroundColor	string	optional	#fff
  color	string	optional	#000
  focus	string	optional	lightgray
  search	string	optional	#d5d5d5

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        input={{
          width: 100,
          height: 32,
          border: '2px solid lightgray',
          radius: 50,
          backgroundColor: '#fff',
          color: '#000',
          focus: 'lightgray',
          search: '#d5d5d5',
        }}
      />
    )
  }
  
  export default App

• menu

  Parameters

  Name	Type	Required	Default
  backgroundColor	string	optional	#fff
  bottomLine	string	optional	1px solid lightgray
  selectedLine	string	optional	2px solid black
  height	number	optional	45
  listCnt	number	optional	6
  arrowColor	string	optional	#000
  imgSize	number	optional	60

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        menu={{
          backgroundColor: '#fff',
          bottomLine: '1px solid lightgray',
          selectedLine: '2px solid black',
          height: 45,
          listCnt: 6,
          arrowColor: '#000',
          imgSize: 60,
        }}
      />
    )
  }
  
  export default App

• backgroundColor

  Type	Required	Default
  string	optional	#fff

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        backgroundColor={'#fff'}
      />
    )
  }
  
  export default App

• column

  Type	Required	Default
  number	optional	4

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        column={4}
      />
    )
  }
  
  export default App

• scroll

  Type	Required	Default
  boolean	optional	true

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scroll={true}
      />
    )
  }
  
  export default App

• scrollHover

  Type	Required	Default
  string	optional	#6d7072

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        scrollHover={'#6d7072'}
      />
    )
  }
  
  export default App

• stickerClick

  Get Sticker URL Function

  Type	Required	Value
  Function	optional	url, stickerId, packageId

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        stickerClick={(info) => console.log(info)} // {url, stickerId, packageId}
      />
    )
  }
  
  export default App

• storeClick

  Get Store Icon Click Status

  Type	Required	Value
  Function	optional	true

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        storeClick={(e) => console.log(e)} //true
      />
    )
  }
  
  export default App

• preview

  Type	Required	Default
  boolean	optional	false

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        preview={false}
      />
    )
  }
  
  export default App

• loadingColor

  Type	Required	Default
  string	optional	#ff4500

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        loadingColor={'#ff4500'}
      />
    )
  }
  
  export default App

• shadow

  Type	Required	Default
  string	optional	0 10px 20px 6px rgba(0, 0, 0, 0.1)

  Example

  import { UnifiedComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <UnifiedComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        shadow='0 10px 20px 6px rgba(0, 0, 0, 0.1)'
      />
    )
  }
  
  export default App