How to get module code as string javascript

Question

Let’s say I have simple component in React and I want to use not only that component itself but the code of it as it is to show on screen ? How can I do that?

Here's what I m doing exactly

import Anything from ../../'anywhere';

const CustomComponent = () => {
    return (
        <div>
            <Anything />
        </div>
    )
}

export default CustomComponent;

Then in another file

import CustomComponent from './custom-component';

return (
    <div codeHighlightStr={CustomComponentString}>
        <CustomComponent />
    </div>
)

I don't know how to get CustomComponentString from the same module

Something like this? [How to import a .txt file from my source?](https://stackoverflow.com/questions/50539756) — adiga, Feb 25 '19 at 09:32
@AbderrahimSoubaiElidrissi Please dude. Stop talking. What code you need for this to be more understandable. — HalfWebDev, Feb 25 '19 at 09:33
The question doesn't have enough details. This is very specific to your setup which wasn't explained. Is this create-react-app project? — Estus Flask, Feb 25 '19 at 11:38

score 0 · Answer 1 · answered Feb 25 '19 at 09:30

0

You can use ReactDomServer.renderToString method or some npm package by query 'jsx to string'

answered Feb 25 '19 at 09:30

Alexey Baguk

168
1
6

Updated my question – HalfWebDev Feb 25 '19 at 10:11

score 0 · Answer 2 · answered Feb 25 '19 at 09:35

0

You can use <xmp> tag.

 render(){
    return (<div>
       <xmp>
       let test='SomeValue';
       document.getElementById('someElement').innetHTML = test;
       </xmp>
    </div>)
}

DEMO

answered Feb 25 '19 at 09:35

brk

48,835
10
56
78

On the same line I was hoping, if I could not only present code inside jsx using – HalfWebDev Feb 25 '19 at 09:47
Is there a way to re-use all of the module code including import statements as well? – HalfWebDev Feb 25 '19 at 09:48
Updated my question – HalfWebDev Feb 25 '19 at 10:11

How to get module code as string javascript

2 Answers2