Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 4x 4x 4x 15x 37x 17x 15x 15x 15x 17x 4x 4x | import { cloneElement, Component } from 'react'
import { getEnvironment } from '../get-env'
import { type DetectEnvParams } from '../detect-env'
import { type EnvDetails } from '../env.types'
export interface WithEnvironmentProps {
// exactly one element must be provided
children: JSX.Element
}
/**
* Utility component that synchronously detects the current environment (React/Preact etc.) and
* provides it as a prop to the child element.
*
* @example
* ```jsx
* const App = ({ env }: { env: EnvDetails }) => `I'm running in ${env.name}!`
*
* <WithEnvironment>
* <App />
* </WithEnvironment>
* ```
*/
class WithEnvironment extends Component<WithEnvironmentProps> {
constructor(props: WithEnvironmentProps) {
super(props)
}
detectedEnv: EnvDetails | undefined
render(...args: any[]) {
if (!this.detectedEnv) {
// unlike React, class components in Preact always receive `props` and `state` in render()
// this is true for both Preact 8.x and 10.x
const hasAnyArguments = args.length > 0
const detectParams: DetectEnvParams = {
context: { classRenderReceivesAnyArguments: hasAnyArguments },
}
this.detectedEnv = getEnvironment(detectParams)
}
// passes the `env` down as a prop
return cloneElement(this.props.children, { env: this.detectedEnv })
}
}
export { WithEnvironment }
|