Skip to content

stipop-development/stipop-react-sdk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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