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

Component
SearchComponent
PickerComponent
StoreComponent
UnifiedCompoent

---

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

Parameters	Type
params	Object
size	Object
border	Object
input	Object
backgroundColor	String
column	Number
scroll	Boolean
scrollHover	String
stickerClick	Function
preview	Boolean
loadingColor	String
shadow	String
auth	String
mainLanguage	String

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required	Stipop API Key for your app. Visit developer dashboard for new API Key.
  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

  Example

  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

  Example

  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

  Example

  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)

  Example

  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
  

• auth

  If you need access token to use Service Authentication, please contact us through [tech-support@stipop.io](mailto: tech-support@stipop.io)

  Type	Required	Default
  string	optional	Stipop accessToken.

  Example

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

• mainLanguage

  Type	Required	Default
  string	optional	en

  Example

  import { SearchComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <SearchComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        mainLanguage={'en'}
      />
    )
  }
  
  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

Parameters	Type
params	Object
size	Object
border	Object
menu	Object
backgroundColor	String
column	Number
scroll	Boolean
scrollHover	String
stickerClick	Function
storeClick	Function
preview	Boolean
loadingColor	String
shadow	String
auth	String
mainLanguage	String
store	Boolean

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required	Stipop API Key for your app. Visit developer dashboard for new API Key.
  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

  Example

  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
  

• auth

  If you need access token to use Service Authentication, please contact us through [tech-support@stipop.io](mailto: tech-support@stipop.io)

  Type	Required	Default
  string	optional	Stipop accessToken.

  Example

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

• mainLanguage

  Type	Required	Default
  string	optional	en

  Example

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

• store

  Type	Required	Default
  boolean	optional	True

  Example

  import { PickerComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <PickerComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        store={true}
      />
    )
  }
  
  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

Parameters	Type
params	Object
downloadParams	Object
color	Object
size	Object
border	Object
scroll	Boolean
onClose	Function
shadow	String
auth	String
mainLangauge	String

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required	Stipop API Key for your app. Visit developer dashboard for new API Key.
  userId	string	required
  lang	string	strongly recommended	en
  countryCode	string	strongly recommended	US
  animated	string	optional	Y: Look for premium stickers only N: Look for free stickers only Empty 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 Store S: 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
  

• auth

  If you need access token to use Service Authentication, please contact us through [tech-support@stipop.io](mailto: tech-support@stipop.io)

  Type	Required	Default
  string	optional	Stipop accessToken.

  Example

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

• mainLanguage

  Type	Required	Default
  string	optional	en

  Example

  import { StoreComponent } from 'stipop-react-sdk'
  
  const App = () => {
    return (
      <StoreComponent 
        params={{
          apikey: 'apikey',
          userId: 'userId',
        }}
        downloadParmas={{
          isPurchase: 'N'
        }}
        mainLanguage={'en'}
      />
    )
  }
  
  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

Parameters	Type
params	Object
size	Object
border	Object
input	Object
menu	Object
backgroundColor	String
column	Number
scroll	Boolean
scrollHover	Boolean
stickerClick	Function
storeClick	Function
preview	Boolean
loadingColor	String
shadow	String
auth	String
mainLanguage	String
store	Boolean

• params

  Parameters

  Name	Type	Required	Default
  apikey	string	required	Stipop API Key for your app. Visit developer dashboard for new API Key.
  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
  

• auth

  If you need access token to use Service Authentication, please contact us through [tech-support@stipop.io](mailto: tech-support@stipop.io)

  Type	Required	Default
  string	optional	Stipop accessToken.

  Example

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

• mainLanguage

  Type	Required	Default
  string	optional	en

  Example

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

• store

  Type	Required	Default
  boolean	optional	True

  Example

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