Added searchPlaceholder prop to config, as an alternative to searchPlaceHolder.

Author: talisraeli

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.11",
+  "version": "4.4.12",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/config/config.ts

@@ -17,6 +17,8 @@ import {
 
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
+export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+
 export function mergeConfig(
   userConfig: PickerConfig = {}
 ): PickerConfigInternal {
@@ -66,7 +68,8 @@ export function basePickerConfig(): PickerConfigInternal {
       ...basePreviewConfig
     },
     searchDisabled: false,
-    searchPlaceHolder: 'Search',
+    searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
+    searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
@@ -79,6 +82,7 @@ export function basePickerConfig(): PickerConfigInternal {
 export type PickerConfigInternal = {
   emojiVersion: string | null;
   searchPlaceHolder: string;
+  searchPlaceholder: string;
   defaultSkinTone: SkinTones;
   skinTonesDisabled: boolean;
   autoFocusSearch: boolean;

src/config/useConfig.ts

@@ -10,11 +10,19 @@ import {
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
-import { PickerDimensions, PreviewConfig } from './config';
+import {
+  DEFAULT_SEARCH_PLACEHOLDER,
+  PickerDimensions,
+  PreviewConfig,
+} from './config';
 
 export function useSearchPlaceHolderConfig(): string {
-  const { searchPlaceHolder } = usePickerConfig();
-  return searchPlaceHolder;
+  const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
+  return (
+    [searchPlaceHolder, searchPlaceholder].find(
+      (p) => p !== DEFAULT_SEARCH_PLACEHOLDER
+    ) ?? DEFAULT_SEARCH_PLACEHOLDER
+  );
 }
 
 export function useDefaultSkinToneConfig(): SkinTones {

stories/picker.stories.tsx

@@ -87,7 +87,7 @@ export const EmojiImageTwitter = (args: Props) => (
   <Template {...args} emojiStyle={EmojiStyle.TWITTER} />
 );
 export const CustomSearchPlaceholder = (args: Props) => (
-  <Template searchPlaceHolder="👀 Find" />
+  <Template searchPlaceholder="👀 Find" />
 );
 export const SkinTonesDisabled = (args: Props) => (
   <Template {...args} skinTonesDisabled />
@@ -172,16 +172,18 @@ export const StandaloneEmojiNative = () => {
   return <Emoji unified="1f60a" emojiStyle={EmojiStyle.NATIVE} size={35} />;
 };
 export const CustomUnifiedEmojiImage = () => {
-  const [unified, setUnified] = useState("1f9d1-1f3ff-200d-1f4bc");
+  const [unified, setUnified] = useState('1f9d1-1f3ff-200d-1f4bc');
 
-  return <>
-    <Emoji unified={unified} size={35} />
-    <input onChange={(e) => setUnified(e.target.value)} value={unified} />
-  </>
-}
+  return (
+    <>
+      <Emoji unified={unified} size={35} />
+      <input onChange={e => setUnified(e.target.value)} value={unified} />
+    </>
+  );
+};
 
 export const HideEmojisByUnicode = (args: Props) => (
-  <Template {...args} emojiStyle={EmojiStyle.NATIVE}  />
+  <Template {...args} emojiStyle={EmojiStyle.NATIVE} />
 );
 
 function TemplateDark(args) {