I'm currently trying tailwindcss along with Vite and recently something is being super annoying and couldn't find a solution yet.
Looks like tailwind automatically centers the content and I'm struggling on working with flex components due to this.
This is a code piece from what I'm using, it's very simple but you can see that the content is being centered from default and can't change that behavior yet D:
export const Home = () => {
return (
<div>
Wow
</div>
);
};
This is what it looks like
And if I try to use a combination of flex components it looks like this:
Tailwind-css doesn't center the element by default.
I suspect this is being observed , because the parent of Home() component has a flex property which is center, so divs of Home() component is taking the center of the screen
Or
Maybe Vite in the boilerplate, Check the boilerplate once, as Vite boilerplate usually centers the div elements
Tailwind doesn't automatically center content, but it might be from vite's default styling in the 'style.css' file. Be sure to check other
Related
I want to apply background colour to my react app and I am using the Grid structure. Whenever I give try to apply the background colour it just colours up-to where my Grid is being used. Any suggestions or solutions are much appreciated for the same.
React version being used: 18.2.0
Material-UI: 5.8.6
apply color to body like this
body {
background-color: #cecece;
}
I'm suggesting body since you're not giving any additional info. But if you want it for entire app then applying for body is fine.
You will have to apply it in common style file or a reset and not in the grid css, I assume that you'll have one of this.
I have a styled component div that contains an image. I want to apply animation on the image, when the user reaches the img element while scrolling downwards. Please Note that I'm using React and more specifically Styled Components in my project.
Thanks alot.
You can use the intersection observer API. It overcomes the performance issues of using a scroll listener, but it is not supported in IE or old browsers.
There is a nice wrapper for React: react-intersection-observer
Here is an example with styled components:
Background: I am currently working on a react project in which I have included a sidebar component to display a certain kind of content. The sidebar itself slides in from the right and slides over existing content on the webpage. I'm using portal to render the sidebar into the main content container of the page regardless of where the component is placed in the React DOM. The sidebar has a fixed position and I've so far created some less elegant hooks for measuring the height of the page header, using vanilla javascript, in order for the sidebar not to cover the header. This works quite well. However, the designer has now requested a fixed positioned bottom status bar for showing response messages from API calls. In order for this status bar not to awkwardly cover the sidebar when it is open, I want to use Context to globally store the current height of the status bar element (I assume the status bar is only rendered once at the time in the application). This would, however, required me to be able to update the context store when the size of the referenced React component resizes.
The actual question: Is it possible to make a React component reference trigger a side effect (using useEffect) when the component is resized or in any other way use a listener for the reference which is triggered when the component is resized? If not, what other way would you propose?
Note: If my questions doesn't make sense or requires more information, feel free to ask.
There is this hook you could use for this, but depends on which browsers you want to support: https://github.com/rehooks/component-size
You could do something like this:
const ref = useRef(null)
const size = useComponentSize(ref)
React.useEffect(() => {
// do something with size
}, [size]);
I use primeNG (Angular2) to show the modal:
<p-dialog appendTo="body" [(visible)]="displayCreateGateway" modal]="true" [width]="700">
When I am on mobile view (less than declared 700px) modal does not display correctly. For example: I have window width 500 px, but modal generates in 700 px (properly will be width:100%). I think this is not fault of my code, because in official website primeNG situation is the same.
Do you know how to solve this problem? The easiest way is probably add media queries in css, but override component from primeNG isn't easy. Maybe helpful will be JS?
If you look at the documentation of the component, you will see a styleClass attribute, used like this :
<p-dialog styleClass="myStyle">
When you do that, it adds a new class to the component, allowing you to style it as you want.
I am trying to recreate the following, where a menu is brought up from bottom when a button is pressed, but lost as to where to start. How can I go about doing so?
Any guidance or insight would be greatly appreciated.
It looks like this is the best so far. Works on Android and iOS.
https://github.com/prscX/react-native-bottom-action-sheet
Note: it requires native modules so it won't work on Expo.
Alternatively, you use this component from NativeBase:
https://docs.nativebase.io/Components.html#actionsheet-def-headref
FYI: I haven't tested react-native-bottom-action-sheet
You can use a module like this for an example. IMO this can be done in two ways:
Slide a View with animation like in the library linked above.
Use a Modal component that will slide from the bottom (it's actually a default behaviour of this component). Remember to add a margin on top of the content to don't slide it to the top of the screen).