create-inferno-context
Polyfill for Inferno proposed React context API
Install
npm i create-inferno-context --save
You'll need to also have inferno
and prop-types
installed.
API
const Context = ;// <Context.Provider value={providedValue}>{children}</Context.Provider>// ...// <Context.Consumer>{value => children}</Context.Consumer>
Example
;; // Pass a default theme to ensure type correctnessconst ThemeContext = ; state = theme: 'light' ; { return // Pass the current context value to the Provider's `value` prop. // Changes are detected using strict comparison (Object.is) <ThemeContextProvider value=thisstatetheme> <div> <button onClick= { this; } > Toggle theme </button> thispropschildren </div> </ThemeContextProvider> ; } { return // The Consumer uses a render prop API. Avoids conflicts in the // props namespace. <ThemeContextConsumer> <h1 style= color: theme === 'light' ? '#000' : '#fff' > thispropschildren </h1> </ThemeContextConsumer> ; } { return <ThemeContextConsumer> <div style= fontSize: '35px' background: 'white' height: '40px' width: '40px' > theme === 'light' ? '⚡️' : '🕶' </div> </ThemeContextConsumer> ; } { return <ThemeToggler> <div> <Title>Really cool context</Title> <Emoji /> </div> </ThemeToggler> ;} let container = document; if !container throw 'missing #container'; ;
Compatibility
You cannot pass children types aren't valid Inferno vNode:
<ContextProvider> <div/> <div/></ContextProvider>