Comments (8)
I don't see why not - PRs welcome! I might get around to this during the weekend.
In the meantime I'm going to try and clean up the code so that it's easier for others to jump into 😅
from hx.
Sure, an example would be the way the Emotion CSS library does theming: https://github.com/emotion-js/emotion/blob/master/docs/theming.md
They expose a ThemeProvider
component that you pass in the current theme to. You then can access theme theme
prop in any styled components or using a withTheme
higher-order component.
In this case we don't need to do anything fancy, we can just use the ThemeProvider
and withTheme
HOC as usual.
The annoying bit is when, in CLJS, we want to create and use context. Right now, you have to use JS interop to get at the Provider
component.
This isn't super heinous to me but I see why people might not like it. So I think that to aid with this, we should have a :provider
component that you pass in the context value created by react/createContext
and it will pull the provider out for you.
We could also have a hx.react/create-context
function that just proxies react/createContext
since requiring React just for creating context is a bit annoying.
At the end of the day this is all small QoL enhancements so not super high on my list. But PRs welcome!
from hx.
Closing this with #25 merged
from hx.
Hey I'd like to help with this. Any feedback would be helpful because I'm not very familiar with createContext.
I'm thinking about adding the wrapper function that returns a map containing the producer and consumer:
(defn context
"Use react/createContext and return a map of Producer and Consumer."
[value]
(let [context (react/createContext value)]
{:provider (.-Provider context)
:consumer (.-Consumer context)}))
However, I'm not sure how to test this function. Would you give me some suggestion? Thank you!
from hx.
I just found the function hx.hooks/<-context
. It'd be better if the output of the above context
function can be passed into <-context
too. I'm thinking of making <-context
to a multimethod to handle both the map scenario and the React.Context object scenario. What's your thought on this solution?
from hx.
Hmm good point about <-context
. Perhaps a differect tactic is in order.
One thing to note is that most libraries expose Provider
and Consumer
components separately, rather than exposing the raw Context value returned by createContext
.
So the case we're talking about is most useful when we're using a Context value we've created ourselves.
Another option: we could add a new hiccup element, :provider
, that would allow you to pass in a Context value and it would create the Provider
for you.
Example:
(def my-context (react/createContext))
(defnc Child [_]
(let [value (<-consume my-context)]
[:div value]))
(defnc App [_]
[:provide {:context my-context
:value "something"}
[Child]])
I can think of other ways, like trying to get crafty with protocols or whatnot, but probably not worth the effort.
from hx.
Thanks for responding @Lokeh !
One thing to note is that most libraries expose
Provider
andConsumer
components separately, rather than exposing the raw Context value returned bycreateContext
.
So the case we're talking about is most useful when we're using a Context value we've created ourselves.
I'm not sure if I understand you correctly. Do you have an example that exposes Provider and Consumer separately? I'm just not sure which would be more valuable/desirable: a) expose raw Context, or b) expose Provider and Consumer, or c) all of them. (Sorry I don't have much experience with the context object.)
I like your example above. It feels a lot like what I'd rather write in clojure instead of thinking the raw js objects. Do you think this is a separate PR?
from hx.
Thanks, I see how this is useful now. I would love to work on the PR for this. Thanks for taking the time explaining.
from hx.
Related Issues (20)
- Destructuring defnc :keys [class] has weird behaviour HOT 1
- Improved react dev-tools support for hooks HOT 3
- CLJS data structures are compared by ref in <-effect deps HOT 11
- Semantics and API of <-state HOT 16
- class & className issue when wrapping defnc component with pure react component HOT 3
- Make it fast
- Experience Report HOT 7
- Reducers dont support Multimethods HOT 4
- Document hiccup parser API
- hx/f exceptions handlint HOT 4
- any HOT 1
- Export hooks under Clojure-style names HOT 2
- `defcomponent` API is very confusing HOT 1
- How-to contains misleading memo use HOT 7
- Push missing tags + maybe a 0.5.4 release HOT 2
- Docstring support for defnc (and defcomponent) HOT 1
- track dependencies to selectively rerender with useMemo HOT 3
- Passing down original js props in render props does not work with js->clj
- hx.hooks/useMemo deps as CLJS collection? HOT 1
- Typo in package 0.5.3 (maybe broken) HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hx.