remove export of WakuContext, create ContetnPair provider

src/ContentPairProvider.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import type { ContentPair, ReactChildrenProps } from "./types";
+import { useCreateContentPair } from "./useCreatContentPair";
+
+type ContentPairContextType = Partial<ContentPair>;
+
+const ContentPairContext = React.createContext<ContentPairContextType>({
+    decoder: undefined,
+    encoder: undefined,
+});
+
+/**
+ * Hook to retrieve Encoder/Decoder pair from Context.
+ * @example
+ * const { encoder, decoder } = useContentPair();
+ * @returns {Object} { encoder, decoder }
+ */
+export const useContentPair = (): ContentPairContextType => React.useContext(ContentPairContext);
+
+type ContentPairProviderProps = ReactChildrenProps & {
+    contentTopic: string;
+    ephemeral?: boolean;
+};
+
+/**
+ * Provider for creating Encoder/Decoder pair based on contentTopic
+ * @example
+ * const App = (props) => (
+ *  <ContentPairProvider contentTopic="/toy-chat/2/huilong/proto">
+ *      <Component />
+ *  </ContentPairProvider>
+ * );
+ * const Component = (props) => {
+ *  const { encoder, decoder } = useContentPair();
+ *  ...
+ * };
+ * @param {string} contentTopic - content topic for configuring the pair
+ * @param {boolean} ephemeral - flag to set messages ephemeral according to RFC https://rfc.vac.dev/spec/14/
+ * @returns React ContentPair Provider component
+ */
+export const ContentPairProvider: React.FunctionComponent<ContentPairProviderProps> = (props) => {
+    const result = useCreateContentPair(props.contentPair, props.ephemeral);
+
+    return (
+        <ContentPairContext.Provider value={result}>{props.children}</ContentPairContext.Provider>
+    )
+};

src/WakuProvider.tsx

@@ -16,7 +16,7 @@ import {
 
 type WakuContextType<T extends Waku> = CrateNodeResult<T>;
 
-export const WakuContext = React.createContext<WakuContextType<Waku>>({
+const WakuContext = React.createContext<WakuContextType<Waku>>({
   node: undefined,
   isLoading: false,
   error: undefined,

src/index.ts

@@ -12,5 +12,8 @@ export {
   LightNodeProvider,
   RelayNodeProvider,
   useWaku,
-  WakuContext,
 } from "./WakuProvider";
+export {
+  useContentPair,
+  ContentPairProvider,
+} from "./ContentPairProvider";

src/types.ts

@@ -1,7 +1,7 @@
 import { RelayCreateOptions, WakuOptions } from "@waku/core";
+import type { Decoder, Encoder } from "@waku/core/dist/lib/message/version_0";
 import type { CreateOptions } from "@waku/create";
 import type { Protocols, Waku } from "@waku/interfaces";
-import type { Decoder, Encoder } from "@waku/core/dist/lib/message/version_0";
 
 export type HookState = {
   isLoading: boolean;
@@ -29,3 +29,7 @@ export type ContentPair = {
   encoder: Encoder;
   decoder: Decoder;
 };
+
+export type ReactChildrenProps = {
+  children?: React.ReactNode;
+};

src/useCreatContentPair.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { createDecoder, createEncoder } from "@waku/core";
 import type { Decoder, Encoder } from "@waku/core/dist/lib/message/version_0";
+
 import type { ContentPair } from "./types";
 
 /**