fix(community-skeleton-provider): replaced recompose with react hooks

fix(community-skeleton-provider): allow id and additional props

fix(community-skeleton-provider): remove recompose dependency

fix(community-skeleton-provider): increment patch version number

Author: mujtabahasni

packages/SkeletonProvider/SkeletonProvider.jsx

@@ -1,17 +1,22 @@
-import React, { Fragment } from 'react'
+import React, { createContext } from 'react'
 import PropTypes from 'prop-types'
-import { withContext } from 'recompose'
 import AutoSkeletonizer from './AutoSkeletonizer'
 
-const SkeletonProvider = withContext({ show: PropTypes.bool }, props => ({
-  show: props.show,
-}))(props => <Fragment>{AutoSkeletonizer(props.children)}</Fragment>)
-
+export const SkeletonContext = createContext({ show: true })
+function SkeletonProvider({ show, children, ...rest }) {
+  return (
+    <SkeletonContext.Provider value={{ show }} {...rest}>
+      {AutoSkeletonizer(children)}
+    </SkeletonContext.Provider>
+  )
+}
 SkeletonProvider.propTypes = {
   show: PropTypes.bool,
+  children: PropTypes.node,
 }
 SkeletonProvider.defaultProps = {
   show: true,
+  children: null,
 }
 
 export default SkeletonProvider

packages/SkeletonProvider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tds/community-skeleton-provider",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "",
   "main": "index.cjs.js",
   "module": "index.es.js",
@@ -32,7 +32,6 @@
     "@tds/core-colours": "^2.2.1",
     "@tds/shared-styles": "^1.5.2",
     "@tds/util-helpers": "^1.5.0",
-    "prop-types": "^15.6.2",
-    "recompose": "^0.30.0"
+    "prop-types": "^15.6.2"
   }
 }

packages/SkeletonProvider/withSkeleton.jsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { getContext } from 'recompose'
 
-export const SkeletonRenderer = getContext({ show: PropTypes.bool })(props =>
-  props.show ? props.skeleton() : props.render()
-)
+import { SkeletonContext } from './SkeletonProvider'
+
+function SkeletonRenderer(props) {
+  const skeleton = useContext(SkeletonContext)
+  return skeleton.show ? props.skeleton() : props.render()
+}
 
 const getName = comp => comp.displayName || comp.name || 'Component'