Is is possible to include a React component call within a block of text and then get React to execute the component?
For example, let's say I had:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id libero rutrum, volutpat nisi non, tempus ipsum. <InsertStuff props={props} /> Vestibulum vel sapien lacus. Pellentesque tristique erat a purus tempus, vitae vulputate nulla consequat
I'd like React to see <InsertStuff props={props} /> and execute the component so that I get:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id libero rutrum, volutpat nisi non, tempus ipsum. HERE'S THE STUFF GENERATED BY THE COMPONENT Vestibulum vel sapien lacus. Pellentesque tristique erat a purus tempus, vitae vulputate nulla consequat
Can this be done?
It can be done - in your render() method (or in the return value if using a functional component) you need to guarantee that there is a top level tag, even if it renders nothing (e.g. <></> or <React.Fragment></React.Fragment>)
More info
JSX in Depth
React Fragments
Live example that does not add any new tags (div/span/etc) to the DOM - will print:
<div id="root">Inline text before a component with props: {"randomProp":"value"} and some text after</div>
const Component = (props) => (
<React.Fragment>
a component with props: {JSON.stringify(props)}
</React.Fragment>
);
ReactDOM.render(
<React.Fragment>
Inline text before <Component randomProp="value"/> and some text after
</React.Fragment>,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
Related
I am attempting to reproduce the sliding image effect seen on this website https://chiwawa.es/en/.
I can see how it works on this website (see changeImages function in 63c2acc.js; however, getting this to work in React is proving difficult for me.
To illustrate what I have managed to do, I've published https://dskdirhhwk.vercel.app/.
Solved - (this link now correctly shows animations thanks to answer below)
The difficulty I'm running into is animating the images. The Sections are getting re-rendered by React upon state update, affecting how I apply the classes to the markup. I used Reacts Profiler to verify these are updates, not remounts.
I initially had the Intersection Observer outside the Section component, but this didn't appear to work. I also had a simple setState mechanism and have since built it into a reducer, so that I could add the active class after the other classes.
I am pulling my hair out here. I want a few hints and a push in the right direction!
This is on Next.js. Here is my code.
import React, {
Fragment,
useState,
forwardRef,
useEffect,
useLayoutEffect,
useCallback,
useContext,
useRef,
useMemo,
} from 'react';
import cx from 'classnames';
// yarn add classnames
const useIntersect = ({root = null, rootMargin, threshold = 0}) => {
const [entry, updateEntry] = useState({});
const [node, setNode] = useState(null);
const observer = useRef(null);
useEffect(() => {
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver(([entry]) => updateEntry(entry), {
root,
rootMargin,
threshold,
});
const {current: currentObserver} = observer;
if (node) currentObserver.observe(node);
return () => currentObserver.disconnect();
}, [node]);
return [setNode, entry];
};
const Home = () => {
const initialState = {active: 'teal', current: 'teal'};
const [state, dispatch] = React.useReducer(reducer, initialState);
function reducer(state, {section, type}) {
switch (type) {
case 'reset':
return initialState;
case 'changeSection':
return {
...state,
previous: state?.current,
current: section,
};
case 'makeActive':
return {
...state,
active: section,
};
default:
return state;
}
}
const activeSection = (section) => {
dispatch({section: section, type: 'changeSection'});
setTimeout(() => {
dispatch({type: 'makeActive', section: section});
}, 1000);
};
const Section = ({sectionID, className, children}) => {
const [ref, entry] = useIntersect({
threshold: '0.7',
});
useEffect(() => {
if (state?.current == sectionID) return;
if (entry.isIntersecting) {
activeSection(sectionID);
}
}, [entry]);
const childrenWithProps = React.Children.map(children, (child, index) => {
if (React.isValidElement(child)) {
if (index == 0)
return React.cloneElement(child, {
className: cx(
'fixed top-0 w-1/2 h-screen transition-all duration-[1000ms] place-items-center place-content-center transform-gpu',
{
'translate-y-[-100vh]': sectionID != state?.active,
'z-40 translate-y-0': sectionID == state?.current && sectionID == state?.active,
}
),
data: 'observable',
id: sectionID,
});
}
return child;
});
return (
<section className={className} ref={ref}>
{childrenWithProps}
</section>
);
};
return (
<>
<div className="fixed bottom-0 z-50 w-1/2 opacity-50">
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
<Section sectionID="teal" className="bg-teal-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=1" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="blue" className="bg-blue-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=2" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="orange" className="bg-orange-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=3" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="pink" className="bg-pink-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=4" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
</>
);
};
export default Home;
You should (almost) never ever ever declare a component inside of another functional component. Doing so essentially creates an entirely new React component class every render, which means it is impossible for React to reconcile which component is which between renders. Try moving your <Section> functional component definition out of the scope of <Home>.
I am composing the following using Semantic UI React: column 1: text, column 2 and 3: images. While the images are middle aligned to each other, the text next to them is aligned to the top.
Here is the code. I have to put marginTop: "-15em" to move the title up. Is there a better way to do this?
import React from "react";
import {Grid,Header} from "semantic-ui-react";
<Grid>
<Grid.Row verticalAlign="middle">
<Grid.Column width={4}>
<Header as="h4" style={{ marginTop: "-15em" }}>
Title
</Header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse finibus hendrerit nulla, quis mattis felis eleifend
sed. Vivamus a blandit tellus. Donec non erat enim. Nullam
vulputate lectus a finibus tempor. Fusce vel purus est. Praesent
ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
In maximus enim sem, id dignissim odio volutpat vitae.
</p>
</Grid.Column>
<Grid.Column width={6}>
<img src={img1} alt="img1" />
</Grid.Column>
<Grid.Column width={6}>
<img src={img2} alt="img2" />
</Grid.Column>
</Grid.Row>
</Grid>
You can put verticalAlign property on each Grid.Column and remove this property from the Grid.Row. Hopefully it should work
import React from "react";
import {Grid,Header} from "semantic-ui-react";
<Grid>
<Grid.Row>
<Grid.Column width={4}>
<Header as="h4">
Title
</Header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse finibus hendrerit nulla, quis mattis felis eleifend
sed. Vivamus a blandit tellus. Donec non erat enim. Nullam
vulputate lectus a finibus tempor. Fusce vel purus est. Praesent
ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
In maximus enim sem, id dignissim odio volutpat vitae.
</p>
</Grid.Column>
<Grid.Column verticalAlign="middle" width={6}>
<img src={img1} alt="img1" />
</Grid.Column>
<Grid.Column verticalAlign="middle" width={6}>
<img src={img2} alt="img2" />
</Grid.Column>
</Grid.Row>
</Grid>
I am having trouble getting the Material UI Menu to work with React Table#v6.
I want to be able to right-click anywhere in the table (row, td) and show a context menu. This part is working.
But I also want to be able to continuously right-click other locations in the table and always show the context menu the cursor location. This is not working. Currently, you have to click-away to close the menu and then right-click again to re-open the menu.
In the Material UI demo this is working fine:
https://material-ui.com/components/menus/#context-menu
I adopted the example above to work with React Table, but it's not quite working as expected.
My example adoption:
https://codesandbox.io/s/aged-leaf-0nf6b?file=/src/index.js
Any Ideas how to get this to work as in the example?
This is because you added onContextMenu props to Td, not the table container.
Move onContext Menu to container div, like this:
<div onContextMenu={(e) => {
e.preventDefault();
console.log("context menu");
this.setState({
mouseX: e.clientX - 2,
mouseY: e.clientY - 4
});
}}>
And it should work.
Enjoy!
I ended up creating a popper context menu to replicate all the material-ui behavior for menus.
import React from "react";
import Popper from "#material-ui/core/Popper";
import Typography from "#material-ui/core/Typography";
import MenuList from "#material-ui/core/MenuList";
import MenuItem from "#material-ui/core/MenuItem";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from "#material-ui/core/styles";
import { ClickAwayListener, Fade } from "#material-ui/core";
/* copied from https://github.com/mui-org/material-ui/blob/v4.3.2/packages/material-ui/src/Menu/Menu.js#L21 */
const useMenuStyles = makeStyles({
/* Styles applied to the `Paper` component. */
paper: {
// specZ: The maximum height of a simple menu should be one or more rows less than the view
// height. This ensures a tapable area outside of the simple menu with which to dismiss
// the menu.
maxHeight: "calc(100% - 96px)",
// Add iOS momentum scrolling.
WebkitOverflowScrolling: "touch"
},
/* Styles applied to the `List` component via `MenuList`. */
list: {
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0
}
});
export default function FakedReferencePopper() {
const [open, setOpen] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | any>(null);
const handleClose = () => {
setOpen(false);
};
const handleContextMenu = (e) => {
e.preventDefault();
const { clientX, clientY } = e;
setOpen(true);
const virtualElement = {
getBoundingClientRect: () => ({
width: 0,
height: 0,
top: clientY,
right: clientX,
bottom: clientY,
left: clientX
})
};
setAnchorEl(virtualElement);
};
const id = open ? "faked-reference-popper" : undefined;
const menuClasses = useMenuStyles();
return (
<div>
<div onContextMenu={handleContextMenu}>
<Typography aria-describedby={id}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
metus metus finibus ex, sit amet facilisis neque enim sed neque.
Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
tellus a libero volutpat maximus. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet
vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac
fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit
vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu
finibus est. Proin ullamcorper fermentum orci, quis finibus massa.
Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit
amet facilisis neque enim sed neque. Quisque accumsan metus vel
maximus consequat. Suspendisse lacinia tellus a libero volutpat
maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper
ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec.
Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel
malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin
ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa
ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque
enim sed neque. Quisque accumsan metus vel maximus consequat.
Suspendisse lacinia tellus a libero volutpat maximus. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,
bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum
vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor
porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis
vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus
finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan
metus vel maximus consequat. Suspendisse lacinia tellus a libero
volutpat maximus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta
semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus
nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce
vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin
ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa
ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque
enim sed neque. Quisque accumsan metus vel maximus consequat.
Suspendisse lacinia tellus a libero volutpat maximus. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus,
bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum
vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor
porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis
vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus
finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan
metus vel maximus consequat. Suspendisse lacinia tellus a libero
volutpat maximus.
</Typography>
</div>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
transition
placement="bottom-start"
>
{({ TransitionProps }) => (
<ClickAwayListener onClickAway={handleClose}>
<Fade {...TransitionProps}>
<Paper className={menuClasses.paper}>
<MenuList className={menuClasses.list} autoFocus>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</Paper>
</Fade>
</ClickAwayListener>
)}
</Popper>
</div>
);
}
Here is codesandbox
https://codesandbox.io/s/popper-context-menu-t1u6r
I'm need justify a text and my code isn't work correctly.
import React from "react"
import { ScrollView, StyleSheet, View, WebView } from "react-native"
export default class App extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<WebView
source={{
html:
"<style>p{text-align:justify}</style>" +
"<p>" +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo tortor ut ipsum pharetra sodales. Praesent sed diam non lacus convallis dapibus. Sed vulputate erat risus, ac hendrerit eros egestas id. Etiam pellentesque auctor ipsum, non cursus nisi gravida sed. Ut eget pretium risus. Curabitur a lectus odio. Etiam felis urna, pharetra ut odio in, tristique suscipit tortor. Cras vitae risus odio. Etiam a leo elit. Duis molestie fermentum mi vitae pretium. Morbi luctus semper quam, et suscipit nisi convallis dictum. Fusce sit amet est dapibus, interdum ante non, lacinia metus. Donec at nulla non ante consectetur vulputate. Cras tristique porttitor ligula quis posuere. Integer nec laoreet felis, at tempor leo. Ut et convallis quam." +
"</p>"
}}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
margin: 20
}
})
The text isn't showed in the screen.
I'm try execute the code in a Android device.
Try removing the scrollView component, and putting the style in the Webview.
Here is an example:
https://snack.expo.io/SJQ5Mf9ym
I recently had to pick up ReactJS in the last few days to work on a project. While I have most of the basics down, I'm coming across issues with the syntax of ES5 and ES6. I can't quite grasp the differences and how to convert code from one to the other. I've been using a lot of copy and paste of ES6, so it's been fairly easy for me to pick up. But when I come across ES5, I struggle.
I'm trying to create a modal from pre-existing code, but I don't quite know what it's supposed to look like in the end. Here is what I'm trying to convert:
import React from 'react';
import ReactDOM from 'react-dom';
const Example = React.createClass({
getInitialState() {
return { showModal: false };
},
close() {
this.setState({ showModal: false });
},
open() {
this.setState({ showModal: true });
},
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return (
<div>
<p>Click to get the full Modal experience!</p>
<Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Launch demo modal
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>there is a <OverlayTrigger overlay={popover}>popover</OverlayTrigger> here</p>
<h4>Tooltips in a modal</h4>
<p>there is a <OverlayTrigger overlay={tooltip}>tooltip</OverlayTrigger> here</p>
<hr />
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
ReactDOM.render(<Example />, mountNode);
Any tips/tricks/help would be truly appreciated!
If you're building your js bundle using something like webpack, you can pick and choose what features of es6 you want to use. it isn't "all or nothing." For example, in the above you're using the ES6 import syntax.
also, an important distinction is the difference between es6 features and React.createClass() and React's extends Component structure. You can read about the here https://facebook.github.io/react/docs/components-and-props.html