Customizing Picker Component

Picker Component is where users can send stickers what you want among the stickers you downloaded and provides Store Component buttons for downloading stickers. By adding a single line of code, you'll be able to add feature to your app, and customize the UI to make it better.

Before you begin

Make sure you went through all processes in Before You Begin to sign up for stipop dashborad and get API Key, which is reuiqred to complete development of the SDK.

Using Picker Component

apikey : Stipop API key for your app.
userId : Unique value for every user to distinguish unique users. The userId can be a string of any format.

React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { PickerComponent } from 'stipop-react-sdk'

const App = () => {
  return (
    <PickerComponent 
      params={{
        apikey: 'apikey',
        userId: 'userId',
      }}
    />
  )
}

export default App

Next.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import dynamic from 'next/dynamic'

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

export default App

Customizing Parameters

params
Name	Type	Description	Required
apikey	string	Stipop API Key for your app. Visit developer dashboard for new API Key.	Required
userId	string	Unique value for every user to distinguish unique users. The userId can be in any string format. Important: Using same userId for multiple users is not allowed.	Required

size
Name	Type	Description	Required
width	int	Specify picker component width. Default Value: 360(px)	Optional
height	int	Specify picker component height. Default Value: 300(px)	Optional
imgSize	int	Specify picker component img size. Default Value: 70(%)	Optional

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

menu
Name	Type	Description	Required
height	int	Specify picker component menu height. Default Value: 45(px)	Optional
backgroundColor	string	Specify picker component menu background color. Default Value: #fff	Optional
bottomLine	string	Specify picker component menu bottom line border. Default Value: 1px solid lightgray	Optional
selectedLine	string	Specify picker component selected menu item bottom line border. Default Value: 2px solid black	Optional
listCnt	int	Specify picker component number of menu items. Default Value: 6	Optional
arrowColor	string	Specify picker component menu arrow color. Default Value: #000	Optional
imgSize	int	Specify picker component menu item image size(px). Default Value: 60(%)	Optional

backgroundColor
Type	Description	Required
string	Specify picker component background color. Default Value: #fff	Optional

column
Type	Description	Required
int	Specify the number of columns in which the sticker images are displayed. Default Value: 4	Optional

scroll
Type	Description	Required
boolean	Specify whether scroll is shown or not. Default Value: true	Optional

scrollHover
Type	Description	Required
string	Specify the color of the scroll when mouse hovered over the scroll. Default Value: #6d7072	Optional

stickerClick
Type	Description	Required
function	Return the sticker URL when the sticker is clicked. - Function signature: stickerClick={(url) => console.log(url)}	Optional

storeClick
Type	Description	Required
function	Return the boolean value when the store icon is clicked. - Function signature: storeClick={(click) => console.log(click)} // true	Optional

preview
Type	Description	Required
boolean	Specify whether a preview image is shown when a sticker is clicked. Default Value: false	Optional

loadingColor
Type	Description	Required
string	Specify the color of the loading spinner displayed while the sticker is loading. Default Value: #ff4500	Optional

shadow
Type	Description	Required
string	Specify picker component shadow effect. Default Value: 0 10px 20px 6px rgba(0, 0, 0, 0.1)	Optional

Was this page helpful?

We’re here to help. Contact us.