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)
Related
I want to make the headings (H1 tag) to be auto focused on page load so the screen reader can read the headings.
With the below code I made it work as expected.
<fieldset> <h1 role="alert"> <a id="specialfocusable" tabIndex={-1}> Component A </a> </h1> </fieldset>
My app is like a stepper, were we move from component A to Component B similarly Component B to component A.
Problem is when navigating from Component B to component A heading text is not read by screen reader.
Please help me to resolve this problem as I'm not finding any solution.
Below is the app link,
https://stackblitz.com/edit/react-ts-ckrut8?file=a.tsx
Simply cleaning up that code should be enough:
<h1 id="h1" tabindex="-1">Component 1</h1>
followed by
h1.focus()
There is a lot wrong in the posted code, which might cause the issues with the screen reader.
Most importantly it’s changing the H1’s role. Most screen reader users rely on finding headlines for orientation and navigation. There are shortcuts that help jump directly to the H1, for example.
An alert is not needed since focus is being moved to the headline. It will get announced on focus.
A <fieldset> is for forms and would need to have an accessible name. It’s simply invalid here.
How to React that?
To focus an element you’ll need to access the rendered DOM. Therefore you use the ref property along with useRef()
function MyComponent() {
const h1Ref = useRef(null);
useEffect(() => {
h1Ref.current.focus();
}, []);
return <h1 ref={h1Ref} tabIndex={-1} />;
}
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'm currently working with Fluent UI to create a web app, and in this app I'm attempting to create a Fluent UI Dialog with a custom component that contains a Fluent UI ComboBox inside of it. I'm calling ReactDOM.createPortal on return from the render method inside of my custom React object. Upon first use of the Dialog my ComboBox functions as expected, i.e. the dropdown shows properly and it allows me to select and interact with my page as intended. However, when closing the Dialog after having already interacted with the ComboBox, upon re-opening the Dialog the ComboBox no longer displays the dropdown (although I can see the options are still there, just somewhere in the background). I've tried adjusting the zIndex of the ComboBox, it's container, etc. with no luck. I'm starting to think that it's an issue with ReactDOM.createPortal whenever the component is re-rendered after having been interacted with in a previous render, and figured I'd see if anyone has ever tried to do something similar. Thanks so much in advance!
render() {
const {options, changeOptions} = this.store;
return (
<>
{!!this.item && buttonTexts.length && ReactDOM.createPortal(
<ComboBox
label='Title'
selectedKey={changeOptions}
onChange={this.changeOptionDisplaying}
options={options.map(text => ({ key: text, text }))}
/>,
this.item
)}
<div ref={this.setRef} dangerouslySetInnerHTML={{ __html: this.props.htmlString}} />
</>
)
}
// this.item is an HTMLDivElement
Well I don't know if I am allow to post a question like this which is obviously more generic. But I just wanted to clarify and understand more about React reusable components. I have a component which holds information to open modals, and to insert user input.
I wanted to create the same component - when it comes to the design - but instead of having inputs and modals I just wanted to display information.
Is it possible for me to use the same visual component with different purposes such as to Input data and Visualize data? How would I do that since the input and the modal component uses logic and its internal state to open modals and uses methods from its parent to handleInputData? how do I switch these functionalities?
Yes, of course. It's the core feature of React, the declarative composition of components.
For instance, let's say that you have a Modal component which handles the display of something on the screen, above other content. You can use the props to customize what it renders right?
Them, you will specialize that component with your different behaviours, like a form or displaying information.
Example (conceptually):
const Modal = ({ title, children }) => (
<div className="modal">
<h1>{ title }</h1>
<div className="body">
{ children }
</div>
</div>
)
const FormModal = () => (
<Modal title="What's your name?">
<form>
{ /* your form here */ }
</form>
</Modal>
)
const AlertModal = () => (
<Modal title="Something happened">
{ /* your information to display here */ }
</Modal>
)
I have built an element which is kind of template. (e.g, thumbnail container with image at the top and something in the footer with dynamic content between them)
the dynamic content can be different types of DOM elements, based on the state.
I did it with adding logic in the render method which "injects" the dynamic part.
Does this make sense (having logic in the render method which returns different react components)?
Is there a better way for templating? (i'm not looking for projects that add this capability, wanted to know if there's a "react way" to do so.
Thanks!
edit: here's the code I was referring to (coffeescript):
internalContent: ->
switch #props.title
when "title1" then SomeReactFactory(props)
when "title2" then SomeOtherReactFactory(props)
render ->
...
DOM.div
className: 'panel'
#internalContent()
the internalContent() method is dynamically adding some React Component based on the prop
This is the React way.. And you should make use of it to target your specific domain.
For example a Button in React could be written like this:
const MyButton = ({ text, type = "normal", color = "blue", onClick }) => {
return (
<button
onClick={onClick}
style={{backgroundColor: color }}
className={"my-button my-button--type" + type}>
{text}
</button>);
};
Or a layout component:
const MyLayout = ({side, nav, main}) => {
return (
<div className="container">
<nav>{nave}</nav>
<aside>{side}</aside>
<div className="main">{main}</div>
</div>
)
}
Now you can composite it for example like this:
class App extends Component {
...
render() {
<MyLayout
nav={<MyNav/>}
side={<MySideBar items={...} />}
main={<MyButton onClick={this.onClick} text="Main Button"}
/>
}
}
Dont try to pack everything in a big Component which will do everything, the trick in React is to make small reusable Components and composite them.
You could also create a bunch of components which you can use across many projects.