Add initialSearchTerm prop

README.md

@@ -67,6 +67,7 @@ The following props are accepted by the picker:
 | width | `number / string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
 | height | `number / string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
 | categoryHeight | `number / string` | `100` | Controls the height of the home page reaction category. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
+| pickerContext | `PickerContextValue` | | Value to be used as the picker context value.
 
 ### TenorImage
 
@@ -116,6 +117,16 @@ This is an example `TenorImage` object:
 }
 ```
 
+### PickerContextValue
+
+Should be an array in the format `[pickerContextValueType, setPickerContextValue]`.
+
+The pickerContextValueType format:
+| Property      | Type       | Default | Description |
+| ------------- | ---------- | ----------- | ----------- |
+| searchTerm    | `string`   | "" | The search term |
+| showTrending  | `boolean`  | false |Controls if should show trending category or not |
+
 ## Customization
 
 ### Custom Picker Width and Height

src/GifPickerReact.tsx

@@ -1,12 +1,12 @@
-import React, { useMemo } from 'react';
+import React, { Dispatch, SetStateAction, useMemo } from 'react';
 import Body from './components/body/Body';
 import Header from './components/header/Header';
 import PickerMain from './components/PickerMain';
 import PickerContext from './context/PickerContext';
 import SettingsContext from './context/SettingsContext';
 import TenorContext from './context/TenorContext';
 import './GifPickerReact.css';
-import usePickerContext from './hooks/usePickerContext';
+import usePickerContext, { PickerContextType } from './hooks/usePickerContext';
 import useSettings from './hooks/useSettings';
 import TenorManager from './managers/TenorManager';
 import { ContentFilter, TenorImage, Theme } from './types/exposedTypes';
@@ -23,19 +23,20 @@ export interface GifPickerReactProps {
 	height?: number | string;
 	categoryHeight?: number | string;
 	theme?: Theme;
+	pickerContext?: [PickerContextType, Dispatch<SetStateAction<PickerContextType>>];
 }
 
 function GifPickerReact(props: GifPickerReactProps): JSX.Element {
 	const settings = useSettings(props);
-	const pickerContext = usePickerContext();
+	const internalPickerContext = usePickerContext();
 	const tenorManager: TenorManager = useMemo(() => (
 		new TenorManager(settings.tenorApiKey, settings.clientKey,
 			settings.country, settings.locale, settings.contentFilter)
 	), [ ]);
 
 	return (
 		<SettingsContext.Provider value={settings}>
-			<PickerContext.Provider value={pickerContext}>
+			<PickerContext.Provider value={props.pickerContext || internalPickerContext}>
 				<TenorContext.Provider value={tenorManager}>
 					<PickerMain>
 						<Header />

src/stories/GifPicker.stories.tsx

@@ -1,5 +1,6 @@
+import React from 'react';
 import { expect } from '@storybook/jest';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import GifPicker, { Theme } from '..';
 
@@ -82,3 +83,15 @@ export const Trending = {
 		await userEvent.click(canvas.getAllByTestId('gpr-category')[0]);
 	}
 };
+
+export const ControlledSearchTerm = {
+	...Home,
+	render: (props: any) => {
+		const [ pickerContext, setPickerContext ] = React.useState({
+			searchTerm: 'love',
+			showTrending: false
+		});
+
+		return <GifPicker {...props} pickerContext={[ pickerContext, setPickerContext ]} />;
+	}
+};

yarn.lock

@@ -1359,15 +1359,15 @@
   resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz"
   integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
 
-"@esbuild/win32-x64@0.17.19":
+"@esbuild/darwin-arm64@0.17.19":
   version "0.17.19"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz"
-  integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz"
+  integrity sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==
 
-"@esbuild/win32-x64@0.18.9":
+"@esbuild/darwin-arm64@0.18.9":
   version "0.18.9"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.9.tgz"
-  integrity sha512-S+oBiO8UE1hmDJZlZJ6HZEdBBrxCGovwN66P9rle4DWVktM5fsMouYhpbtUf4WQLEy0HvcE2ZOQ2gIq8v0BkBw==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.9.tgz"
+  integrity sha512-vw9kWBT2EvDhLAVkI5c2KWFh+GMwgXrzR1QnIpZazA+tIacaelNLMMSTHEJisOeQqiMQhv8goTODFm9liS7wpw==
 
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
@@ -5184,6 +5184,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"