@pagedotapp/page-reaction-picker/meta.json

PageReactionPicker - A reusable React component

{
	"name": "PageReactionPicker",
	"package": "@pagedotapp/page-reaction-picker",
	"description": "An emoji reaction picker component with desktop dropdown and mobile bottom sheet support.",
	"tags": ["emoji", "reactions", "picker", "social", "interactive", "page-ui"],
	"attributes": [
		{
			"name": "onSelect",
			"type": "(emoji: string, emojiData: EmojiClickData) => void",
			"default": null,
			"description": "Callback when an emoji is selected",
			"required": true
		},
		{
			"name": "trigger",
			"type": "ReactNode | ((isOpen: boolean) => ReactNode)",
			"default": null,
			"description": "Custom trigger element or render function",
			"required": false
		},
		{
			"name": "triggerIcon",
			"type": "string",
			"default": "'emoji-smile'",
			"description": "Bootstrap icon name for the trigger button",
			"required": false
		},
		{
			"name": "triggerIconSize",
			"type": "number",
			"default": 20,
			"description": "Size of the trigger icon in pixels",
			"required": false
		},
		{
			"name": "showPlusSign",
			"type": "boolean",
			"default": false,
			"description": "Show plus sign on the trigger button",
			"required": false
		},
		{
			"name": "tooltipText",
			"type": "string",
			"default": "'Add reaction'",
			"description": "Tooltip text for the trigger button",
			"required": false
		},
		{
			"name": "theme",
			"type": "'light' | 'dark' | 'auto'",
			"default": "'auto'",
			"description": "Theme for the emoji picker",
			"required": false
		},
		{
			"name": "emojiStyle",
			"type": "EmojiStyle",
			"default": "EmojiStyle.APPLE",
			"description": "Visual style of emojis (Apple, Google, Facebook, etc.)",
			"required": false
		},
		{
			"name": "showPreview",
			"type": "boolean",
			"default": true,
			"description": "Show preview of hovered emoji",
			"required": false
		},
		{
			"name": "autoFocusSearch",
			"type": "boolean",
			"default": true,
			"description": "Auto-focus the search input when opened",
			"required": false
		},
		{
			"name": "width",
			"type": "number | string",
			"default": 350,
			"description": "Width of the emoji picker",
			"required": false
		},
		{
			"name": "height",
			"type": "number | string",
			"default": 450,
			"description": "Height of the emoji picker",
			"required": false
		},
		{
			"name": "disabled",
			"type": "boolean",
			"default": false,
			"description": "Disable the reaction picker",
			"required": false
		},
		{
			"name": "forceMobile",
			"type": "boolean",
			"default": false,
			"description": "Force mobile mode with bottom sheet",
			"required": false
		}
	],
	"usage": "Import and use to add emoji reaction functionality to posts, comments, or messages.",
	"example": "import { PageReactionPicker } from '@pagedotapp/page-reaction-picker';\n\nfunction Example() {\n  const handleEmojiSelect = (emoji, data) => {\n    console.log('Selected emoji:', emoji);\n  };\n\n  return (\n    <PageReactionPicker\n      onSelect={handleEmojiSelect}\n      tooltipText=\"React to this post\"\n      theme=\"auto\"\n    />\n  );\n}",
	"goodPractices": [
		"Use for adding reactions to social content",
		"Provide clear tooltip text for accessibility",
		"Consider mobile UX with bottom sheet option",
		"Keep emoji picker size reasonable for viewport"
	],
	"badPractices": [
		"Don't use multiple pickers too close together",
		"Avoid opening picker programmatically without user action",
		"Don't override native emoji rendering unnecessarily",
		"Avoid disabling search in large emoji sets"
	],
	"notes": "Uses emoji-picker-react library with lazy loading. Automatically switches between dropdown (desktop) and bottom sheet (mobile) based on screen size.",
	"editorProps": {
		"triggerIcon": {
			"component": "IconPicker",
			"title": "Trigger Icon",
			"description": "* Custom trigger icon (default: emoji-smile)"
		},
		"triggerIconSize": {
			"component": "NumberInput",
			"title": "Trigger Icon Size",
			"description": "* Size of the trigger icon"
		},
		"showPlusSign": {
			"component": "Toggle",
			"title": "Show Plus Sign",
			"description": "* Show plus sign on trigger button",
			"default": true
		},
		"tooltipText": {
			"component": "TextInput",
			"title": "Tooltip Text",
			"description": "* Tooltip text for the trigger button"
		},
		"hideTooltip": {
			"component": "Toggle",
			"title": "Hide Tooltip",
			"description": "* Hide tooltip",
			"default": false
		},
		"theme": {
			"component": "Select",
			"title": "Theme",
			"description": "* Theme for the emoji picker",
			"options": ["light", "dark", "auto"]
		},
		"emojiStyle": {
			"component": "TextInput",
			"title": "Emoji Style",
			"description": "* Emoji style"
		},
		"searchPlaceholder": {
			"component": "TextInput",
			"title": "Search Placeholder",
			"description": "* Search placeholder text"
		},
		"showPreview": {
			"component": "Toggle",
			"title": "Show Preview",
			"description": "* Show preview of hovered emoji",
			"default": true
		},
		"autoFocusSearch": {
			"component": "Toggle",
			"title": "Auto Focus Search",
			"description": "* Auto focus search input",
			"default": false
		},
		"skinTonesDisabled": {
			"component": "Toggle",
			"title": "Skin Tones Disabled",
			"description": "* Disable skin tone selection",
			"default": false
		},
		"categories": {
			"component": "TextInput",
			"title": "Categories",
			"description": "* Categories to display"
		},
		"customEmojis": {
			"component": "Array",
			"title": "Custom Emojis",
			"description": "* Custom emojis to add"
		},
		"names": {
			"component": "Array",
			"title": "Names",
			"required": true
		},
		"imgUrl": {
			"component": "UrlInput",
			"title": "Img Url",
			"required": true
		}
	}
}