Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ConsumeContext #756

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

FabianHummel
Copy link

Add a function to directly consume contexts within JSX. Inspired by React's Context.Consumer component, but nicely integrated with this primitive's createContextProvider.

Tests have been added and source code + README.md is documented

Copy link

changeset-bot bot commented Feb 15, 2025

🦋 Changeset detected

Latest commit: e71e4ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@solid-primitives/context Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@thetarnav
Copy link
Member

this is a cool idea, but I don't like how you need a bound function (without parameters) to use it. When the default solid api for using the context is useContext(Ctx). At least it should be added to docs. To pass it as () => useContext(Ctx) or useContext.bind(null, Ctx)
Also you can easily do this in solid and it will have the same effect

<Provider>
{untrack(() => {
    const value = useContext(Ctx)
    return <>{value}</>
})}
</Provider>

@FabianHummel
Copy link
Author

If you mean the useFn parameter, yes, it would be better to change it to the context directly. Maybe allow for either of one, because I really like simply passing the use function that is returned from createContextProvider, especially because createContextProvider does not return the raw solidJS context:

<ConsumeContext context={counterContext}>
  {(ctx) => <>...</>}
</ConsumeContext>

// or

<ConsumeContext useFn={useCounter}>
  {(ctx) => <>...</>}
</ConsumeContext>

And for the easy alternative: <ConsumeContext> solely serves as syntactic sugar, just like <Show>, <For>, etc...

@FabianHummel
Copy link
Author

Implemented the aforementioned ideas and added tests + docs

@thetarnav
Copy link
Member

what about

<ConsumeContext use={useMyContext}>
<ConsumeContext use={() => useContext(MyContext)}>
<ConsumeContext use={MyContext}>

by simply checking the typeof props.use?

Also it may be useful to mention in the docs that the prop will not be reactive.

@FabianHummel
Copy link
Author

Oh, I totally forgot about this option, I will implement it later that day, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants