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 [[email protected]](mailto: [email protected])

  | 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 [[email protected]](mailto: [email protected])

  | 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 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

• auth

  If you need access token to use Service Authentication, please contact us through [[email protected]](mailto: [email protected])

  | 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 [[email protected]](mailto: [email protected])

  | 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