replaced IKContext with ImageKitProvider

Author: ANKUR DWIVEDI

README.md

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build:js": "rollup -c",

package.json

@@ -1,6 +1,6 @@
 import { UrlOptionsPath, UrlOptionsSrc } from "imagekit-javascript/dist/src/interfaces/UrlOptions";
 import { InferProps } from "prop-types";
-import COMMON_PROPS from "../IKContext/props";
+import COMMON_PROPS from "../ImageKitProvider/props";
 import Props from "./props";
 
 const COMBINED_IMAGE_PROP_TYPES = {

src/components/IKImage/combinedProps.ts

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import COMBINED_PROP_TYPES, { IKImageProps } from './combinedProps';
 import { fetchEffectiveConnection, getIKElementsUrl, getSrc } from '../../utils/Utility';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 import useImageKitComponent from '../ImageKitComponent';
 
 const IKImage = (props: IKImageProps) => {

src/components/IKImage/index.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
-import { IKContextBaseProps } from "../IKContext/props";
+import { ImageKitProviderBaseProps } from "../ImageKitProvider/props";
 import { IKUploadProps, OverrideValues } from "./props";
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 import useImageKitComponent from '../ImageKitComponent';
 
 type IKUploadState = {
   xhr?: XMLHttpRequest;
 };
 
-const IKUpload = forwardRef<HTMLInputElement, IKUploadProps & IKContextBaseProps>((props, ref) => {
+const IKUpload = forwardRef<HTMLInputElement, IKUploadProps & ImageKitProviderBaseProps>((props, ref) => {
   const [state, setState] = useState<IKUploadState>({});
   const contextOptions = useContext(ImageKitContext);
   const { getIKClient } = useImageKitComponent({ ...props });

src/components/IKUpload/index.tsx

@@ -1,6 +1,6 @@
 import { UrlOptionsPath, UrlOptionsSrc } from 'imagekit-javascript/dist/src/interfaces/UrlOptions';
 import { InferProps } from 'prop-types';
-import COMMON_PROPS from "../IKContext/props";
+import COMMON_PROPS from "../ImageKitProvider/props";
 import Props from './props';
 
 const COMBINED_IMAGE_PROP_TYPES = {

src/components/IKVideo/combinedProps.ts

@@ -1,16 +1,16 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { IKContextBaseProps, IKContextExtractedProps } from "../IKContext/props";
+import { ImageKitProviderBaseProps, ImageKitProviderExtractedProps } from "../ImageKitProvider/props";
 import COMBINED_PROP_TYPES, { IKVideoProps } from './combinedProps';
 import { getSrc } from '../../utils/Utility';
 import useImageKitComponent from '../ImageKitComponent';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 
 export type IKVideoState = {
   currentUrl?: string;
-  contextOptions: IKContextExtractedProps;
+  contextOptions: ImageKitProviderExtractedProps;
 };
 
-const IKVideo = (props: IKVideoProps & IKContextBaseProps) => {
+const IKVideo = (props: IKVideoProps & ImageKitProviderBaseProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [state, setState] = useState<IKVideoState>({
     currentUrl: undefined,

src/components/IKVideo/index.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import ImageKit from 'imagekit-javascript';
-import { IKContextBaseProps } from '../IKContext/props';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitProviderBaseProps } from '../ImageKitProvider/props';
+import { ImageKitContext } from '../ImageKitProvider';
 
- const useImageKitComponent= <T = void>(props: React.PropsWithChildren & IKContextBaseProps & T):{getIKClient:() => ImageKit} => {
+ const useImageKitComponent= <T = void>(props: React.PropsWithChildren & ImageKitProviderBaseProps & T):{getIKClient:() => ImageKit} => {
   const contextOptions = useContext(ImageKitContext);
 
   const getIKClient = (): ImageKit => {

src/components/ImageKitComponent/index.ts

@@ -2,32 +2,32 @@
 import React, { createContext } from 'react';
 import { InferProps } from 'prop-types';
 import ImageKit from 'imagekit-javascript';
-import { IKContextProps, IKContextExtractedProps } from "./props";
+import { ImageKitProviderProps, ImageKitProviderExtractedProps } from "./props";
 
 // Create the context
-export const ImageKitContext = createContext<IKContextExtractedProps>({});
+export const ImageKitContext = createContext<ImageKitProviderExtractedProps>({});
 
 /**
- * Provides a container for ImageKit components. Any option set in IKContext will be passed to the children.
+ * Provides a container for ImageKit components. Any option set in ImageKitProvider will be passed to the children.
  *
  * @example
- *<IKContext  publicKey="<public key>" urlEndpoint="url link">
+ *<ImageKitProvider  publicKey="<public key>" urlEndpoint="url link">
  *    <!-- other tags -->
  *    <Image src={link}/>
- *</IKContext>
+ *</ImageKitProvider>
  */
-const IKContext = (props: React.PropsWithChildren<IKContextProps>) => {
+const ImageKitProvider = (props: React.PropsWithChildren<ImageKitProviderProps>) => {
 
-  const extractContextOptions = (mergedOptions: InferProps<IKContextExtractedProps>) => {
-    var result: IKContextExtractedProps = {};
+  const extractContextOptions = (mergedOptions: InferProps<ImageKitProviderExtractedProps>) => {
+    var result: ImageKitProviderExtractedProps = {};
 
-    const propKeys = Object.keys(IKContextExtractedProps);
+    const propKeys = Object.keys(ImageKitProviderExtractedProps);
 
     for (var i = 0; i < propKeys.length; i++) {
       var key = propKeys[i];
-      const value = mergedOptions[key as keyof IKContextExtractedProps];
+      const value = mergedOptions[key as keyof ImageKitProviderExtractedProps];
       if (value) {
-        result[key as keyof IKContextExtractedProps] = value;
+        result[key as keyof ImageKitProviderExtractedProps] = value;
       }
     }
 
@@ -55,4 +55,4 @@ const IKContext = (props: React.PropsWithChildren<IKContextProps>) => {
   );
 }
 
-export default IKContext;
+export default ImageKitProvider;

src/components/IKContext/index.tsx src/components/ImageKitProvider/index.tsxsrc/components/IKContext/index.tsx renamed to src/components/ImageKitProvider/index.tsx

@@ -7,23 +7,23 @@ const Props = {
   authenticator: PropTypes.func
 };
 
-export const IKContextProps = {
+export const ImageKitProviderProps = {
   ...Props,
   transformationPosition: PropTypes.oneOf(['path', 'query']),
 };
 
-export const IKContextExtractedProps = {
-  ...IKContextProps,
+export const ImageKitProviderExtractedProps = {
+  ...ImageKitProviderProps,
   ikClient: PropTypes.instanceOf(ImageKit),
 };
 
-export type IKContextProps = InferProps<typeof IKContextProps> & {
+export type ImageKitProviderProps = InferProps<typeof ImageKitProviderProps> & {
   urlEndpoint?: string;
 };
 
-export type IKContextBaseProps = InferProps<typeof Props>;
+export type ImageKitProviderBaseProps = InferProps<typeof Props>;
 
-export type IKContextExtractedProps = InferProps<typeof IKContextExtractedProps> & {
+export type ImageKitProviderExtractedProps = InferProps<typeof ImageKitProviderExtractedProps> & {
   urlEndpoint?: string;
 };