React responsiveness
I just wanted to know how the responsiveness in to the react is possible ?
There are different ways to achieve responsive like
css-grid bootstrap-grid react-bootstrap
could some let me know what is the preferred way to do the responsive into react?
Regards,
Just use plain JS, that's the beauty of React. I personally do this:
class Responsive extends Component {
state = { isMobile: false };
componentDidMount() {
// use css media quries
this.isMobile = window.matchMedia("(max-width: 767px)");
// test on first run
this.handleIsMobile({ matches: this.isMobile.matches });
// listen to changes after first run
this.isMobile.addListener(this.handleIsMobile);
}
componentWillUnmount() {
// stop listening when unmounted
this.isMobile.removeListener(this.handleIsMobile);
}
handleIsMobile = ({ matches }) => this.setState({ isMobile: matches });
render() {
if (this.state.isMobile) return <div>MOBILE</div>;
return <div>DESKTOP</div>;
}
}
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that u get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. Hovewr if you are only interested in css, then its perfect.
Using this u can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If u want simple setup , then u can use reactstrap link
Other frameworks include react-bootstrap link
Related
Question:
I have multiple dropdowns and I am checking to see if any of them are open. How can i do this in React testing library? (I'm going through bunch of tabIndexes and checking through them)
Issue:
container.querySelectorAll isn't possible in react testing library.
Code:
it('should not expand dropdown for multiple view', () => {
const { container } = render(
getMockedComponent()
)
expect(container).toBeVisible()
container
.querySelector('div[tabindex]').forEach(eachAccordian => {
expect(eachAccordian).toHaveAttribute('aria-expanded', 'false')
})
})
How can i check all the nodes using React testing library?
You can do this by using querySelectorAll instead of querySelector.
container
.querySelectorAll('div[tabindex]').forEach(eachAccordian => {
expect(eachAccordian).toHaveAttribute('aria-expanded', 'false')
})
You might want to use the React Testing Library queries instead of querySelector. queryAllBy should probably get you what you need, where you can select anything with a certain data-test-id or role, and check their attributes from there!
It seems "getByRole" solves many querySelector requirements.
Roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles
This similar question has dozens of answers for JQuery version but here I am using a react-bootstrap carousel component and I would like to add mobile gesture capability to it. How do I do it?
In JQuery, the straightforward answer will be to use Hammer.js to add event handler targeting the carousel and after that, use something along $(target_your_carousel).carousel('next/prev') to slide next/prev.
In React, however, we have ref to target the carousel but how do we even activate the next/prev?
One more way may be through a popular react library (as of May 2019) called react-swipeable. But after hooking it to the carousel, the same problem arises, how do we activate the next/prev?
Update: I realize that the "touch" data-attribute is introduced to upstream vanilla Bootstrap 4.2 as mentioned in react-bootstrap's Github issue. Maybe we can use latest version of Bootstrap with react-bootstrap?
In the end, I used this workaround.
Using react-swipeable, we can wrap the Carousel with Swipeable. Using ref to target the child Carousel and activate the child's methods.
import React, { Component } from 'react';
import { Swipeable } from 'react-swipeable';
class FooClass extends Components {
constructor() { ...
this.carouselRef = React.createRef(); }
render() {
onSwipedLeft: () => { this.carouselRef.current.next(); }
return {
<Carousel ref={this.carouselRef}> ...
This answer may be outdated soon because since "touch" data-attribute is introduced into upstream Bootstrap 4.2, the downstream react-bootstrap should support it in the future. In the future, just add "touch" attribute to the Carousel component.
<Carousel touch={true}>
Rendering some JSON data into a set of collapsible HTML elements is EASY using a library like renderjson (npm package) for Vanilla JS
const data = { sample: [1, 2, 3, 4], data: { a: 1, b: 2, c: ["hello", null] } };
const rjson = renderjson(data);
document.getElementById('to-render').append(rjson);
In The react world
However, renderjson returns an HTMLElement, NOT A STRING. Please note that I'm not JUST trying to convert HTML strings into react HTML here. I'm trying to convert the HTMLElement into a real ReactElement.
So, I actually managed to do this, but since I'm parsing the HTMLElement into a string, all the onClick event listeners generated by renderjson on the + and - handles (to open or collapse the json) are LOST in the process....
Does anyone have any idea on how to convert a HTMLElement object into React Element, keeping all the original event handlers?
I guess, the real question here is: how can the renderjson package be "repackaged" to become React friendly?
Here is a codesandbox to make it easier to see what I'm talking about here.
Good question, I keep running into similar issues with non-React JS libraries that return DOM elements. These libraries should be ported to React, but if you don't want to do that, you can use findDomNode() to get a DOM (not React) node, and append your HTMLElement there. Please note that in the official docs, its use is discouraged because "it pierces the component abstraction". Anyways, in your example, you could add a wrapper class:
class JsonTreeWrapper extends Component {
componentDidMount() {
const renderedJson = renderjson(this.props.data);
const container = findDOMNode(this);
container.appendChild(renderedJson);
}
render() {
return <div/>;
}
}
what this does is render a div, and when the component mounts it finds the div and adds the HTMLElement generated by your library there. Simple.
In your App, you can use it like this:
class App extends Component {
render() {
return (
<div>
<h1> Inside the react world </h1>
<JsonTreeWrapper data={data}/>
</div>
);
}
}
This way your listeners will be working just fine.
Codesandbox didn't work for me, but you can check a demo here. I hope this helps!
I am building a dashboard that links to various servers using ReactJS and electron. Now in a page I have a button and when it is clicked it renders a "webview" in the application using tag but i do not get the whole page as it needs some additional headers like langauge. I saw in the official documentation here https://electron.atom.io/docs/api/webview-tag/ that for using webview methods we first have to load the webview element but I tried all the possibilities that I had in my mind but couldnt come up with a solution.
Please if anyone can let me know where and how should I load the webview element and how to use the webview methods inside the component, really appreciated.
Thanks.
Keep the ref of webview and initially don't load any url
<WebView autosize={true} ref={(input) => { this.webview = input; }} src="data:text/plain" />
in your componentDidUpdate() load url with extra headers
if (this.webview) {
this.webview.loadUrl(url, {
extraHeaders: ""
});
}
so I am unsure of how to best go about closing the MDL drawer when a link is clicked inside the drawer. From similar questions I have gathered you simply need to remove the is-active class from both the div with a class of mdl-layout__obfuscator, and the div with a class of mdl-layout__drawer.
What is the best way to go about this in React? I am not using React-MDL by the way, I am using the CDN version if that matters or helps...
Sorry I am new to both React and MDL.
In most of the cases, we can use react state to handle the show/hide the component. But in this case, we cannot do as we dont have access to have state in react-mdl inbuilt component. So i would suggest to manipulate the react-mdl component.
What manipulate DOM? :O Really?
Yes. We are not doing DOM manipulation for our code, we are just manipulating react-mdl so I think this should not be a issue.
class Navbar extends Component {
hideToggle() {
var selectorId = document.querySelector('.mdl-layout');
selectorId.MaterialLayout.toggleDrawer();
}
render() {
return (
<Navigation>
<Link to={routes.XXX} onClick={() => this.hideToggle()}> XXX</Link>
</Navigation>
);
}
This should solve your issue.
Ref: Github source
Thank you.