I wanted to add a button to my web app provided by a Grubhub in one of my React components using their link for food delivery but the button is not appearing on the screen.
I want to add button as shown in the code below inside my special component.
function Special() {
return (
<div class="gh-button-ifrm container" data-customer-id="xxxxx" data-restaurant-name="xxxxxxx" data-button-type="branded" data-button-color="red" data-button-size="large" data-env="xxx" data-url="xxxxxxx" data-tracking-id="xxxxxx" data-restaurant-address="xxxxxxx" data-version="xxx" data-link-type="xx" style= "margin-top: 20px;"></div>
<script src="https://gh-prod-nitrosites.s3.amazonaws.com/scripts/iframeLib.min.js"></script>
);
export default Special;
Related
I am creating a view using fluent in react. I used to pivot to display the top navigation but the icon in the tab is not visible even on using the itemIcon property in the PivotItem.
This is the code snippet I used
return <div>
<Pivot>{
headerItems.map( (item: IHeaderItem) => (
<PivotItem itemKey = {item.id} headerText = {item.name} itemIcon="Globe">
</PivotItem>
))
}
</Pivot>
</div>
By default, the font-based Fluent UI icons are not added to your bundle or loaded on the page, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.
To make the icons available, you may initialize them as follows. Note that initializeIcons() should only be called once per app and must be called before rendering any components. This is typically done in the app's top-level file just before the main ReactDOM.render() call.
import { initializeIcons } from '#fluentui/react/lib/Icons';
initializeIcons();
I have 2 components - a SearchBar component and a Header component.
I want to embed my SearchBar component in the Header component (like we see on Stackoverflow header above). So the header component must show throughtout the application but the Searchbar component should only embed after user logs in.
I have created a variable which has the Header(Header component) and it is nesting SearchBar into it. SearchBar will later perform a logic and return a table based on the search filters[search={changeSearchFilters}].
Issue - I'm able to render both individually, however, i'm not able to nest them and show together (stackoverflow header and the searchbar)
let headerBar=
<Header>
<SearchBar search={changeSearchFilters}></SearchBar>
</Header>
return (
<div className="AppBody">
{headerBar}
<div className="anchor flexGrow" style={{ 'minHeight': '650px' }}>
{Table1}
{Table2}
{Table3}
</div>
Material-UI adds generated style tags to the <header /> which is of course a standard place for styles, however I need my style tags to be added in a different html element.
I'm looking for a way to transition a legacy CodeIgniter PHP application to React. I have a plan but the issue is that this legacy application is using bootstrap which is messing with my React components.
The plan is to reset all styles in a div and render React components in it. something like:
<div class="clearcss">
<div>
<style type="text/css"></style> // material ui style tags
<div id="react-component"></div>
</div>
</div>
Unfortunately because Material ui adds all of its styles to the header Material ui styles are also reset, but if I could change where material ui places style tags then I think I could make it work.
Actually, in JSS documentation I found examples that show how to specify insertion points outside <head />.
Together with Ryan's comment pointing to material ui documentation I was able to achieve what I wanted.
JSS supports two ways of specifying a custom insertion point for styles:
By adding an html comment (e.g. <!-- custom-jss-insertion-point -->). This is only supported for insertion points in the <head>.
By specifying an element (e.g. insertionPoint: document.getElementById("custom-jss-insertion-point")). This approach supports insertion points in the document body.
Here's a working example of what is needed for the second approach:
index.html -- add an element that styles will be inserted after
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="custom-jss-insertion-point"></div>
<div id="root"></div>
</body>
...
App.js -- Tell JSS about the custom insertion point
import React from "react";
import { create } from "jss";
import { StylesProvider, jssPreset } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
const jss = create({
...jssPreset(),
// Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
insertionPoint: document.getElementById("custom-jss-insertion-point")
});
export default function App() {
return (
<StylesProvider jss={jss}>
<div className="App">
<Button variant="contained" color="primary">
Hello
</Button>
</div>
</StylesProvider>
);
}
This results in the styles being added as shown in the image below:
If you render the insertion point element using React, you need to ensure that the element exists before you try to call document.getElementById("custom-jss-insertion-point") while configuring JSS. If it is possible to do so, I would recommend rendering the insertion point element outside of React (as in the example) to avoid order-of-operations complications.
I have a Material Design TopAppBar Component that I want to add icons to. I'm using the RMWC, a React wrapper for Material Design Components.
See code example below:
import {
TopAppBar,
TopAppBarRow,
TopAppBarSection,
TopAppBarTitle,
TopAppBarNavigationIcon,
TopAppBarActionItem
} from '#rmwc/top-app-bar'
import '#material/top-app-bar/dist/mdc.top-app-bar.css';
function AppBar(props) {
return (
<div className='app-bar-container'>
<TopAppBar>
<TopAppBarRow>
<TopAppBarSection alignStart>
<TopAppBarNavigationIcon icon="menu"/>
<TopAppBarTitle>
{props.title}
</TopAppBarTitle>
</TopAppBarSection>
<TopAppBarSection alignEnd>
<TopAppBarActionItem icon="favorite" />
</TopAppBarSection>
</TopAppBarRow>
</TopAppBar>
</div>
)
}
export default AppBar```
In place of the icons is just the text "menu" and "favorites" when rendered.
I'm thinking I need to import material icons or some other icon library but have tried without success.
So it looks like I had to add a style reference to the material icons. Once I added the following in my index.html file the icons appeared:
I'm trying to have popup window with YouTube video that not affect the main page.
I can still interact with the main page, similar on this web site when you click track you have small popup video on right bottom corner.
I have App.js with YouTube API
{
getYouTubeApi = (searchTerms1, searchTerms2) => {
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=${searchTerms1} ${searchTerms2}&type=video&key=YOUR_KEY`)
.then(res=>res.json())
.then(data=>{
this.setState({videoId: data.items[0].id.videoId})
})
.catch(error=>console.log(error))
}
render(){
return (<YouTube opts={opts} videoId={this.state.videoId} />)
}
}
getYouTubeApi function I call on click on track that just bring to the top of my page where YouTube video loads.
Here is my school project.
Since this describes DOM behavior more than business logic, you could put in whatever you want in a specific component that behaves like a modal (whether by swapping out css classes or setting inline styles based on certain conditions).
To make this modal reusable, I'll suggest you make it a higher order component to wrap around <Youtube /> component or any other component you want to display with modals.
For example, you could have
const Modal = (ComponentToDisplayAsModal, props) => (
<div class="modal">
<ComponentToDisplayAsModal {...props} />
</div>
)
You could then style the modal class to behave like a modal.
On the view you wish to show your modal, you could render
Modal(Youtube, props)