Could you add something so that you can use the provider and the context in the same component? Maybe add an HOC like withContainer()?

[niamleeson]

Here's a use case. I think the API would be really nice.

import { State } from './state.provider';

const Parent = () => {
    const { handleAction, currState, component: Component } = State.useContainer();
    
    return (
          <Component sendAction={handleAction} pollData={pollData} />
    );
};

export default State.withContainer(Parent);

Without the above, you need to do this everytime you create a new state:

import { State } from './state.provider';

const withContainer = (Component) => (props) => (
    <State.Provider>
        <Component {...props} />
    </State.Provider>
);

const Parent = () => {
    const { handleAction, currState, component: Component } = State.useContainer();
    
    return (
          <Component sendAction={handleAction} pollData={pollData} />
    );
};

export default withContainer(Parent);

[niamleeson]

@jamiebuilds I just created a PR to fulfill the above ask. Please let me know if the PR doesn't meet your expectations. #83

[guiaramos]

Work around might be the following, maybe:

import * as React from 'react';
import { createContainer } from 'unstated-next';

const useTeamState = () => {
  return {};
};

export const TeamStateContainer = createContainer(useTeamState);
export type TeamContainerState = ReturnType<typeof useTeamState>;

function withTeamContainer<P extends object>(Component: React.ComponentType<P>) {
  const WrappedComponent = (props) => {
    return (
      <TeamStateContainer.Provider>
        <Component {...props} />
      </TeamStateContainer.Provider>
    );
  };
  return WrappedComponent;
}

export default withTeamContainer;

[marcoskichel]

I use this function:

// connect.js
const connect = (Component, ...providers) => () =>
  providers.reduce(
    (children, Provider) => <Provider>{children}</Provider>,
    <Component />
  )

Then in the containers:

// myContainerComponent.jsx
export default connect(Welcome, SomeProvider, AnotherProvider)