JSFiddle - React, Tailwind, and code Playground

by Pritesh Patel

JavaScript

import React, { Component } from 'react';

const AppContext = React.createContext();

class Provider extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <AppContext.Provider value={{
                state: this.state,
                dispatch: this.dispatch,
                commit: this.commit,
                actions: this.actions,
                mutations: this.mutations
            }}>
                {this.props.children}
            </AppContext.Provider>
        );
    }
};

const withStore = WrappedComponent => props => (
  <AppContext.Consumer>
    {data =>
      (<WrappedComponent
        store={data}
        {...props}
      />)}
  </AppContext.Consumer>
);

const Stuff = ({ state.firstName }) => (<div> <span>{firstName}</span></div>);

export withStore(Stuff);

const App = props => (
	<SomeComponent>
    <SomeNestedComponent>
      <Stuff />
    </SomeNestedComponent>
  </SomeComponent>
)