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}>
Related
I'm using FullCalendar with React and Next.js with the TimeGrid view. If I use the EventContent prop for FullCalendar, when the component re-renders, all existing events blink/flicker.
Here's a stripped down version of my code:
const [proposedTimes, setProposedTimes] = useState([]);
<FullCalendar
events={proposedTimes}
plugins={[timeGridPlugin, interactionPlugin]}
allDaySlot={false}
slotDuration='00:30:00'
slotLabelInterval='01:00:00'
eventStartEditable
firstDay={MONDAY}
height={750}
scrollTime='09:00:00'
displayEventTime
dateClick={handleTimeClick}
eventDrop={handleEventDrop}
eventContent={<div>problem</div>}
slotLabelContent={<div>label</div>}
dayHeaderContent={<div>label</div>}
/>
I've tried stripping away all my code except for the base FullCalendar component and it still flickers. I've run FullCalendar examples in CodeSandbox to see if it's a FullCalendar problem, but somehow it works there. I was injecting a custom component into eventContent and just simplified it to <div>problem</div> to see if that would fix it, and it did not.
Does anyone know how to fix this?
Darkmode works everywhere in my react app, except on a headless ui combobox. I put a styled h1 in the same component and applied dark:bg-red-200(and any other style) no problem. The combobox accept all other tailwind utilities including attibutes like hover: but not the dark: property.
For others (such as me) stumbling upon this:
E.g. the Dialog-component (and I assume others too) render right in the body tag (source)
If you are using "the class strategy" to handle dark mode (i.e. adding a "dark" class to the wrapper) this will be a problem, because the class is not anymore parent to the Dialog
Solution I ended up using:
I ended up using useEffect to add the dark class to the body:
useEffect(() => {
if(darkMode){
document.body.classList.add('dark')
}else{
document.body.classList.remove('dark')
}
}, [darkMode])
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
I'm using Rollup + React + Post CSS to build a component library. I'm looking for a way to autoprefix class names so that they will not conflict with styles in the project using the library.
I have already added this plugin to automate adding the 'prefix-' to every class name in the CSS:
Post CSS Prefixer
However, this does not modify the JavaScript (JSX), so the React components are still using the unnamed classes as className attributes.
Is there a way to use Rollup to automatically modify className attributes to include the same prefix specified in the CSS?
Note that I'm not looking for a fully modular solution such as CSS Modules, as I want the same 'prefix-' across every component inside the library.
You can't use static classNames to use this feature. To use it you need import style as object and assign it as object also.
import React from "react";
import style from "style.css";
class DivMyStyle extends React.Component {
render() {
return <div className={style.myStyle} />
}
}
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.