I am trying to get this layout using tailwind css and also render elements in this order with vue or react
This layout is called "masonry". I recommend that you check how to do that one in CSS (or with some vanilla JS/package), it's not specific to React nor Vue per-se.
As of how to implement it exactly, SO is not a coding platform so I recommend that you Google that for further progress.
Related
I'm trying to find the way to hash classname of all the components that use mui in my project and can't seem to find the right way. I want output like facebook or google all classes are hashed. If the product uses css-module, it is possible to add a plugin in the webpack for hashing, but here I am using regular css and mui component. Does anyone have relevant documentation or specific instructions? As if using jss to do for example? Thanks.
I tried using the classNameGenerator provided by mui but it only changed part of the class to some numbered characters after it. what i want is all classnames with no rules.
As the title suggests I am looking for a way to precompile a single or set of normal react components to plain html/js so I can inject this into my webview.
Since I am open to any solution I will give you some background on what I am trying to achieve. We are building a react native app and need to use Leafleft maps by customer requirement. Since Leaflet is not available for react native straight away we are looking for a way to implement it. Currently we are looking at compiling the leaflet react code to normal html/js and inject this into a webview. If there are other/ better ways by all means suggest them!
Thanks for your time 😄
There is a full feature set with Styled Components when developing in React. It seems you don't get the full experience in react-native.
These limitation aren't really specified anywhere. What are the exact limitations?
I know selectors is one of them.
Dug around on this for a while and found a good response in a GitHub issue. #Andus in the comments is correct. Styled Components simply works within the bounds of React Native flavored CSS.
There are no pseudo elements in React Native 😅 Similarly you won't be able to use:
Any unsupported positioning
Some transforms don't have transformations afaik
Child / Children / Sibling selectors
Media queries or other at rules
Sorry about that! React Native is very focused on their style system, in the sense that they don't support full CSS but only CSS-like StyleSheets, so all that is done on RN in styled-components is some thin conversions to StyleSheets.
if react-dom is specifically geared for rendering html elements and react-native renders native views...
Lets say I have an xml type language and I want to use react / jsx to declaratively compose components that have there own native elements.
How do I create base elements (not divs or spans but something else)
How can I get a react component to run its lifecycle method without using ReactDom.render
any resources out there that I can study?
Thanks in advance
You can checkout the tutorial by Nitin Tulswani on writing a custom react renderer.
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.