emoji-picker-react 4.0.0-rc.10 → 4.0.0-rc.11

package/README.md

@@ -6,7 +6,7 @@ An emoji picker component for React applications.
 
 ## What to know before using
 
-- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client.
+- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client. See troubleshooting section for more information.
 
 ## Installation
 
@@ -14,6 +14,20 @@ An emoji picker component for React applications.
 npm install emoji-picker-react
 ```
 
+## Usage:
+
+```jsx
+import EmojiPicker from 'emoji-picker-react';
+
+function App() {
+  return (
+    <div>
+      <EmojiPicker />
+    </div>
+  );
+}
+```
+
 ## Features
 
 - Custom click handler
@@ -24,46 +38,47 @@ npm install emoji-picker-react
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
 
-## Config Props
+# Props
+
+The following props are accepted by them picker:
 
-- _onEmojiClick_ `(event: MouseEvent, emoji: EmojiClickData) => void` - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:
+- `onEmojiClick`: `(event: MouseEvent, emoji: EmojiClickData) => void` - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:
 
-  ```ts{
-  activeSkinTone: SkinTones;
-  unified: string;
-  unifiedWithoutSkinTone: string;
-  emoji: string;
-  names: string[];
-  getImageUrl: (emojiStyle: EmojiStyle) => string;
+  ```ts
+  {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    getImageUrl: (emojiStyle: EmojiStyle) => string;
   }
   ```
 
-- _theme_ `Theme` - The theme of the picker. Can be either `light` or `dark`. Default is `light`.
+- `theme`: `Theme` - The theme of the picker. Can be `light`, `dark` or auto. Default is `light`.
   The `Theme` enum can be imported from the package.
 
   ```ts
   import { Theme } from 'emoji-picker-react';
   ```
 
-- _emojiStyle_ `EmojiStyle` - The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. Default is `apple`.
+- `emojiStyle`: `EmojiStyle` - The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. Default is `apple`.
   The `EmojiStyle` enum can be imported from the package.
 
   ```ts
   import { EmojiStyle } from 'emoji-picker-react';
   ```
 
-* _autoFocusSearch_: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
+* `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
 
-* _defaultSkinTone_: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:
+* `defaultSkinTone`: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:
 
-```
-  ✋ NEUTRAL = 'neutral'
-  ✋🏻 LIGHT = '1f3fb'
-  ✋🏼 MEDIUM_LIGHT = '1f3fc'
-  ✋🏽 MEDIUM = '1f3fd'
-  ✋🏾 MEDIUM_DARK = '1f3fe'
-  ✋🏿 DARK = '1f3ff'
-```
+  - ✋ 'neutral'
+  - ✋🏻 '1f3fb'
+  - ✋🏼 '1f3fc'
+  - ✋🏽 '1f3fd'
+  - ✋🏾 '1f3fe'
+  - ✋🏿 '1f3ff'
 
 The skin tones typescript enum can be imported directly from the package:
 
@@ -71,35 +86,63 @@ The skin tones typescript enum can be imported directly from the package:
 import { SkinTones } from 'emoji-picker-react';
 ```
 
-- _skinTonesDisabled_: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.
+- `skinTonesDisabled`: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.
 
-- _showPreview_: `boolean` - Whether to show the preview of the selected emoji. Defaults to `true`.
+- `showPreview`: `boolean` - Whether to show the preview of the selected emoji. Defaults to `true`.
 
-- _searchPlaceholder_: `string` - The placeholder text for the search input. Defaults to `Search`.
+- `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.
 
 - categories: Allows full config over ordering, naming and display of categories.
   To only sort/omit categories, you can simply pass an array of category names to display:
 
-```
-  RECENTLY_USED = 'recently_used',
-  SMILEYS_PEOPLE = 'smileys_people',
-  ANIMALS_NATURE = 'animals_nature',
-  FOOD_DRINK = 'food_drink',
-  TRAVEL_PLACES = 'travel_places',
-  ACTIVITIES = 'activities',
-  OBJECTS = 'objects',
-  SYMBOLS = 'symbols',
-  FLAGS = 'flags'
+  - 'recently_used',
+  - 'smileys_people',
+  - 'animals_nature',
+  - 'food_drink',
+  - 'travel_places',
+  - 'activities',
+  - 'objects',
+  - 'symbols',
+  - 'flags'
+
+  For a more in-depth configuration, you can pass an array with category config:
+
+  ```ts
+  [
+    {
+      category: 'recently_used',
+      name: 'Recently Used'
+    },
+    {
+      category: 'smileys_people',
+      name: 'Faces...'
+    }
+  ];
+  ```
+
+# Troubleshooting
+
+## Next.js
+
+To avoid errors such as "document is not defined" on the server side, you should make sure the library is only imported on the client side. Here is how to do that:
+
+```javascript
+import dynamic from 'next/dynamic';
+
+const Picker = dynamic(
+  () => {
+    return import('emoji-picker-react');
+  },
+  { ssr: false }
+);
 ```
 
-For a more in-depth configuration, you can pass an array with category config:
+## Vite
 
-```ts
-[{
-  category: Categories.RECENTLY_USED;
-  name: "Recently Used";
-}, {
-  category: Categories.SMILEYS_PEOPLE;
-  name: "Faces...";
-}]
+For reference, if you only need to shim global, you can add
+
+```html
+<script>
+  window.global = window;
+</script>
 ```

package/dist/DomUtils/isDarkTheme.d.ts

@@ -0,0 +1 @@
+export declare function isSystemDarkTheme(): boolean;

package/dist/config/useConfig.d.ts

@@ -1,4 +1,4 @@
-import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { EmojiClickData, EmojiStyle, SkinTones, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
@@ -8,4 +8,4 @@ export declare function useAutoFocusSearchConfig(): boolean;
 export declare function useCategoriesConfig(): CategoriesConfig;
 export declare function useOnEmojiClickConfig(): (event: MouseEvent, emoji: EmojiClickData) => void;
 export declare function useShowPreviewConfig(): boolean;
-export declare function useThemeConfig(): string;
+export declare function useThemeConfig(): Theme;

package/dist/emoji-picker-react.cjs.development.js

@@ -223,6 +223,14 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
+function isSystemDarkTheme() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 function useSearchPlaceHolderConfig() {
   var _usePickerConfig = usePickerConfig(),
       searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
@@ -275,6 +283,10 @@ function useThemeConfig() {
   var _usePickerConfig9 = usePickerConfig(),
       theme = _usePickerConfig9.theme;
 
+  if (theme === exports.Theme.AUTO) {
+    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
+  }
+
   return theme;
 }