I am writing a "Terms of Service" page using ReactJS
and my idea is to copy the contents of the file tos-text.txt
in the component at build time, to avoid fetching time when the page is opened.
I tried as follows, but with poor results:
<h2>Terms of Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed
consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac
habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non
egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum
blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis
nibh et mi ullamcorper mattis eu eget lectus.
</p>
import { Container } from 'react-bootstrap'
// Page content
import TosText from 'config/tos-text.txt'
// --- Terms of Service ---
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<div dangerouslySetInnerHTML={{ __html: TosText }} />
</Container>
)
}
export default Tos
Currently the page only shows the link to the generated txt file (/static/media/tos-text.dc220bee.txt
).
EDIT:
As @jsejcksn suggested (
The content will be scrollable if it doesn't fit in the default <embed>
box -- but you can control its size with styles or width
and height
attributes.
Using <iframe>
:
Move your static document to the public folder of your app, and change the extension to .html, and then link to it simply:
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<iframe title="Terms of Service" src="./tos-text.html" />
</Container>
)
}
And this should look like this:
Again, this is just default look, you can change it with styling.
You can also use <embed>
with the second approach (file in the public folder):
<embed type="text/html" src="./tos-text.html" />
You can see a live example on codesandbox.