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

Fantastic Idea #1

Open
crherman7 opened this issue Aug 3, 2022 · 7 comments
Open

Fantastic Idea #1

crherman7 opened this issue Aug 3, 2022 · 7 comments

Comments

@crherman7
Copy link

I love this idea and your proof of concept. What I'm really interested in this for are 2 different aspects.

In react I would love to see the use of this for directives similar to vue such as v-if...https://vuejs.org/guide/essentials/conditional.html#v-if-on-template. Would be a nice way to clean up ternaries and nullcoals.

In react native I would love to use this for applying tailwind styles. Right now I use twrnc but I create proxy components to make the className prop available utilizing just strings instead of doing a tw.style('...'). In this case I would be hoping to highjack & sanitize props.

@laurci
Copy link
Owner

laurci commented Aug 10, 2022

Thanks! Sorry for the late reply :) I didn't actually expect anyone to like the idea :)

v-if style directives could be implemented. I personally don't think they clean-up the code, quite the opposite, but I will give it a go.

I don't quite get the second one. Could you share a full example or some docs?

Thanks!

@crherman7
Copy link
Author

crherman7 commented Aug 10, 2022

@laurci hahah I went down a rabbit hole and stumbled upon your repo and thought it could be very useful.

Fair point, my biases probably belong to vue, svelte, etc. more templated code :) So I messed around with the code testing some different approaches and I didn't see a way to intercept an html tag i.e. div it would only let me intercept custom components i.e. MyComponent. So maybe this isn't possible.

My second example is more about simplifying react native styling. Not sure how familiar you are with react native so forgive me if I am giving too detail. In react native you have to provide an object i.e. StyleSheet for styles. Unfortunately TailwindCSS is not directly supported by TailwindCSS. There is a port twrnc which basically allows to wrap a string of Tailwind utility classes with a tw object. It works just fine, I was just hoping there could be even a cleaner way. In react native the styling is done on the style on the View component for example. So instead of doing <View style={tw'flex justify-center items-center'} ... /> I was hoping that I could just extend any react native component to provide className like react and then intercept the components and translate className -> style.

@laurci
Copy link
Owner

laurci commented Aug 10, 2022

I'm not sure of the div either, I have to give it a go to try :) (btw you can also checkout the npm package http://npmjs.com/react-directive-attributes and try it yourself).

Now I get it :) you want to pass className attribute value to the tw template and the result must be passed to style. You can totally do that :) I think it should work right now, out of the box :)

@aifrim
Copy link

aifrim commented Aug 10, 2022

// #1
{cond && <Component />}

// #2
{cond ? <Foo /> : <Bar />}

#1 could me morphed into a decizional

<Component if={comd} />

@crherman7, you can implement this yourself 🍡

@crherman7
Copy link
Author

crherman7 commented Aug 25, 2022

@aifrim hahah yes I'm well aware of these options - the directives work on custom components just not html tags i.e. div....but this is fine react-native it works for all components.

@crherman7
Copy link
Author

@laurci yes this works perfectly as is thanks again!

@laurci
Copy link
Owner

laurci commented Aug 29, 2022

Nice! Let me know how it goes :) I decided to continue the project. Right now I don't have the time, but I will work on it soon.

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

No branches or pull requests

3 participants