@newhighsco/chipset 6.21.1 → 6.22.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.21.1",
+  "version": "6.22.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {

package/src/components/Image/Image.jsx

@@ -1,6 +1,8 @@
 import { arrayOf, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { useImage } from '../../providers'
+
 const Image = ({
   src,
   sources,
@@ -10,6 +12,8 @@ const Image = ({
   className,
   ...rest
 }) => {
+  const renderImage = useImage()
+
   if (!src) return null
 
   const Picture = ({ render, children }) =>
@@ -26,14 +30,14 @@ const Image = ({
         </picture>
       )}
     >
-      <img
-        {...(!sources?.length && { className })}
-        src={src}
-        alt={alt}
-        loading={loading}
-        decoding={decoding}
-        {...rest}
-      />
+      {renderImage({
+        ...(!sources?.length && { className }),
+        src,
+        alt,
+        loading,
+        decoding,
+        ...rest
+      })}
     </Picture>
   )
 }

package/src/providers/ImageProvider/ImageProvider.jsx

@@ -0,0 +1,28 @@
+import { func, node } from 'prop-types'
+import React, { createContext, useContext } from 'react'
+
+// eslint-disable-next-line jsx-a11y/alt-text
+const ImageContext = createContext(props => <img {...props} />)
+
+export const useImage = () => {
+  const renderImage = useContext(ImageContext)
+
+  if (!renderImage) {
+    throw new Error("<ImageProvider /> missing 'renderImage'")
+  }
+
+  return renderImage
+}
+
+export const ImageProvider = ({ children, renderImage }) => {
+  return (
+    <ImageContext.Provider value={renderImage}>
+      {children}
+    </ImageContext.Provider>
+  )
+}
+
+ImageProvider.propTypes = {
+  children: node,
+  renderImage: func
+}

package/src/providers/ImageProvider/index.js

@@ -0,0 +1 @@
+export * from './ImageProvider'

package/src/providers/index.js

@@ -1,2 +1,3 @@
+export { ImageProvider, useImage } from './ImageProvider'
 export { LinkProvider, useLink } from './LinkProvider'
 export { ThemeProvider, withTheme } from './ThemeProvider'