Home > Net >  ReactJS copy text file content into component on build
ReactJS copy text file content into component on build

Time:12-01

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 (rendering with

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:

rendering using

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.

  • Related