I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
Related
In my project which I am building using react typescript, I have it set out as seen below I want to make it so that When I press a button that is currently in the "Topbar" it minimizes the sidebar as well as the left-hand side of my Top Bar which contains a few elements. How do I pass the state of open/close properly between the two or how should I go about this? Do I need to merge the sidebar and top bar into a single component? Cheers.
<div className="App">
<div className='Root-Container'>
<Topbar />
<div className='Sub-Pannels-Root'>
<div className='Side-Bar-Root'>
<Sidebar/>
</div>
<div className='Main-Pannel-Container-Root'>
</div>
</div>
</div>
</div>
You could use Redux, a library allowing a sort of global state. With it, you could set things up such that the minimise button toggles the state, and both components have conditional rendering. It's often more convenient than props drilling if you have nested components.
I have a bunch of screens that follow one of two main layouts. I'm trying to figure out a way that I could turn them into page templates and reuse them to cut down on repeating all the boiler plate markup. I already have reusable components for things like headers, footers, etc. My first attempt was to create layout component building blocks that use ng-content to insert the content that is different for each page. I wanted to have something like this:
<layout>
<layout-header>
<header title="..."></header>
</layout-header>
<layout-content>
<layout-left>
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right>
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer>
<footer></footer>
</layout-footer>
</layout>
The idea is that each component (layout, layout-header, etc) would produce the n lines of layout markup that I had been copying into each page. I am using bootstrap to do the actual layout within each component's template. The template for the main layout component looks something like this:
<div class="h-100 d-flex flex-column">
<ng-content select="layout-header"></ng-content>
<ng-content select="layout-content"></ng-content>
<ng-content select="layout-footer"></ng-content>
</div>
This looked like it would work but the main problem is that the host tags, layout-right for example, stay in the resulting markup and interfere with the actual layout. I could do something like this (but I don't want to):
<layout class="h-100 d-flex flex-column">
<layout-header class="...">
<header title="..."></header>
</layout-header>
<layout-content class="...">
<layout-left class="...">
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right class="...">
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer class="...">
<footer></footer>
</layout-footer>
</layout>
Having to repeat the classes in every page kind of defeats the purpose.
Anyhow, wondering if there is an Angular way of building reusable layouts like this? Or is there something I'm just missing?
I tried using the technique below, but the modal does not blur out the rest of the content. At the same time, I would like to make it reusable and avoid manipulating the elements' z-index
return (
<>
<div className='dashboard-main-neworder' onClick={newOrder}>
<img alt='New Order' src={addorder}></img>
<span>New Order</span>
</div>
{selected && (
<div className='neworder'>
<div className='neworder-title'>
<p>ORDER DETAILS</p>
</div>
You may want to check out portals (https://reactjs.org/docs/portals.html).
They provide a way to attach react nodes somewhere else in the dom tree (let's say next to you #app node so that your modal is always on top of your application, and you can then add a blur effect if that's what you want on your app below the modal.
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
So I'm trying to build a full page in Reactjs but some components are persisted throughout pages. The structure is something like this:
<div>
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
<section className="right>
<section className="persist-this"/>
{moreStuff}
</section>
</div>
</div>
During rerendering is the structure change is significant enough (changing from a page with header & nav to no header/no nav the persist-this section will be re-rendered as well.
Right now I'm actually doing React.renderComponent for each individual pieces & keep the structure static (so like renderComponent for header, nav, left section & moreStuff separately) & I wonder if there's a better way to doing this?
EDIT: I think I do know why this got re-rendered. I guess my question now becomes more like how to organize my structure better. So I got BasePage.jsx which has the structure above & in other pages (like HomePage.jsx or OtherPage.jsx) I do:
var HomePage = React.createClass({
render: function () {
<BasePage>
<p>Home</p>
</BasePage>
}
});
I think when I do React.renderComponent it see <HomePage> & <OtherPage> as 2 completely different Components although they are wrapped by the same <BasePage>, thus unmounting the Page. Should I separate the differences of those pages into mixins?, then always renderComponent(<BasePage>, el) to prevent unmounting?
If something persists between pages, the correct way to do it would be to separate your structure so that whatever persists only shares an ancestor which also persists.
In other words, you should structure it like this:
<div id="siteRoot">
<div className="dynamic">
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
</div>
</div>
<div className="persist-this">
<section className="right>
<section/>
{moreStuff}
</section>
</div>
</div>
Then your css should adapt to your new dom hierarchy and update your layout accordingly.
Now when you switch content in your dynamic section, React will automatically know that it doesn't need to re-render anything in the persist section - since nothing was changed there.