I want to include a circular loading progress in react js.. After clicking this logout button After clicking logout button it has to show a spinner(font awesome icon-fa-circle-o-notch fa-spin) for some secslike this and button text has to change to log in.login btn..
How to do this dynamically?
Assuming you have something like loading in your component state, you could something like this:
<button>{loading? <i className='fa-circle-o-notch fa-spin' /> : 'login' }</button>
A suggestion is to use 'semantic-ui-react' library. It contains a lot out of the box components including what you need. It has the Dimmer and Loader components that can take a boolean as a prop and change the loading and the dimming accordingly. Hope the answer would benefit you.
Related
i have a Tabs-Section (headlessui) and in my Navbar has Links/Buttons for each Tab. My Problem is now that i don't know how i controll the Tabs with the buttons/links in the Navbar. And yes the Tabs are also controlled by the Tab.List.
The Page is structured like this:
<app>
<IndexPage(File)>
<LayoutComponent> // in this component is the navbar-component
{content}
<SectionComponent>
<Tabs.Group>
...
</Tabs.Group>
</SectionComponent>
{content}
<LayoutComponent>
</IndexPage>
</app>
And i tried to handle the TabIndex with react-state (like this) but i don't know how to forward a state through so many components.
My second try was with URL-Querys, but this have many bugs, and it worked not really good.
Is there a way to solve my Problem?
ps: my project is with nextjs
I'm now using the React Context API to build a DataProvider and it works perfectly
Say I am building an instant messaging with app with React (I'm not doing that exactly, but this is easier to explain). I have a sidebar with a list of conversations and, when you click one, it is shown on the right (similar to this). I don't want to mount each conversation component until the user clicks it, but I don't want to unmount it, just hide it, when they click on another conversation. How can I do this cleanly? There will never be more than about 30 chats for any user.
You can store the enabled conversations in an array that you use to show, and when you disable a conversation you can just add a hidden prop to it which you pass to the conversation and make it return null. This will make it not render anything but will not unmount it since you have not removed it from the array that handles the display of conversations.
example at: https://codesandbox.io/s/wispy-forest-59bqj
This is a bit hard to answer since you haven't posted the code.
But, theoretically, the best way to approach this problem is to transfer the data from your sidebar component and load it onto the right component on a per-user basis. You don't have to mount each "conversation component".
You can do this by with the boolean hidden property in your markup. React will render as usual and simply pass it along to the html, the browser will then simply not paint it.
const HideMe = ({ isHidden }) => (
<div hidden={isHidden}>
can you see me?
</div>
)
I made an example for you:
https://codesandbox.io/s/elastic-curie-t4ill?file=/src/App.js
reference: https://www.w3schools.com/tags/att_hidden.asp
I am trying to customize a React Router Link "button" with a custom SVG image. I have found different sources with custom icons to be used, or solution like this but did not succeed with custom image file.The Router link is part of a dynamic list:
<td><Link to={} data-id={} className={"btn btn-success"}>Add new image</Link></td>
And the text would be moved as a hint upon mouseover effect. Any suggestion would be highly appreciated.
Update 1:
So i have tried with and with src. Of course it didnt render and run into error.
I have imported
import { ReactComponent as AddNewImageIcon } from "./WebAppButtons/AddPhoto.svg";
<td><Link to={``} data-id={} className={""}>{<AddNewImageIcon />}Add new image</Link></td>
In this way, it renders, however, there is a weird image background appears under the image:
Screenshot
Did not experience it with SVG files before. Is there any way to remove it or is it the behavior of SVG file in react? The other question is, should it be wrapped into DIV that would be formatted with SCSS or this component can be formatted with SCSS as well, eg.:width/height/hover etc.?
Coming from React, i am really confused. In pages/index.js, suppose I have a button with onClick listener, and clicking on that button will log "you clicked" in the console. How do i implement this? I want that page to be statically generated and also give that button some functionality.
The reason I am having a lot of trouble is because in React tutorials or even in my projects, if i needed some functionality i'd do this:
function handleClick() {
document.body.style.background = "black"
console.log("you clicked") //nothing is logged in console
}
export default function App() {
return(
<button onClick{() => handleClick}>Click Me</button>
)
}
I was gonna use this Next.js to see how state works. But I encountered a different problem. Unless I use inline function in onClick, it doesnt work. If I use a seperate handleClick function, the DOM doens't even show that I had an onclick event. I learned that's because Nextjs is rendered server side, so it doesnt have access to DOM and console etc. Then how do i do this?
I just transitioned from React, and in every tutorial, those guys would use handleClick func or whatever to handle events and stuff. But I couldnt find a solution to do this in Next, how does everyone handle this then? Because pages have interactive buttons right? Are those pages not statically generated then?
You forgot call function handleClick:
<button onClick{() => handleClick()}></button>
the same way you do it in react with your onClick function
Static generation pre-rendering does not change the interactivity of any page, check the following from Next.js documentation :
Each generated HTML is associated with minimal JavaScript code
necessary for that page. When a page is loaded by the browser, its
JavaScript code runs and makes the page fully interactive. (This
process is called hydration.)
https://nextjs.org/docs/basic-features/pages
I have two lightning web components and I have to navigate from one LWC to another LWC on button click.
I tried navigation service to apply the NavigationMixin function in the component’s base class to extends NavigationMixin(LightningElement). but it didn't work.
Can please anyone help me?
Thank you.
You can't (yet).
List of all interesting PageReference types says you're supposed to use standard__component but the target can't be pure LWC. At best it has to be hidden inside an Aura wrapper.
A Lightning component. To make an addressable Lightning web component,
embed it in an Aura component that implements the
lightning:isUrlAddressable interface.
It's a pain. I suspect that's also reason why we can't make quick actions with LWC yet, they'd have to be wrapped in Aura.
Click the link in the quote, it'll lead you to example how to pass parameters (/lightning/cmp/c__helloTarget?c__firstname=John)
I have had the similar issues . I have been trying to navigate to an LWC from another in a community and it looks like :
In communities, only comm__namedPage page-reference will work.
In Salesforce LWC app, you can navigate from one LWC component to another (which is on another tab/apppage) with the following code
myComponent.html
<a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>
myComponent.js
import { NavigationMixin } from 'lightning/navigation';
import { CurrentPageReference } from 'lightning/navigation';
export default class MyComponent extends NavigationMixin(LightningElement){
#wire(CurrentPageReference) pageRef;
#api tabName = "NextPage";
navigateNext() {
console.log("tabName = ", this.tabName)
this[NavigationMixin.Navigate]
({
type: 'standard__navItemPage',
attributes: {
apiName: this.tabName
}
});
}
}
Please replace the tabName variable with the apppage/tab name you are supposed to navigate.
That's it. You will be navigated to the tabName specified when you click the button in html
You can also go through the official documentation for more : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic
In LWC Application, We can do it in either of the following ways:
1. Using Container Component
Create a parent LWC component that will be containing both the lwc components and showing one of the components at a time.
On clicking of the button, dispatch a custom event to navigate between the components.
On receiving the custom event in the container component, hide the visible component and show another.
2. Making use of LWC routes.
For information on lwc routes follow the below link.
http://lwc-router.com/#/quickstart