Import node package:

```plain
npm install fxtext-react
```

Usage:

```js
//App.jsx
...
import FxArticle from 'fxtext-react'

export default function() {
  //this will retrieve the article available at fxhash.xyz/article/example 
  const [slug, setSlug] = useState('example')

  return (
    <div>
      <FxArticle slug='{slug}' />
    </div>
  )
  ...
}
```

Support is currently limited to Markdown Text, Images, Code, Tables, and Lists.&#x20;

Support missing, but on the roadmap, includes: Tezos content pointers, Video embeds, Youtube and Spotify embeds, LaTeX math

The Article contains the article's `,` , and \`\`.

To style in CSS, the respective class names live under the `fx-article` container as `fx-article-title`, `fx-article-desc`, and `fx-article-body`

To keep things lighter, I've left out any highlighting for code blocks. If you'd like, [highlight.js](https://www.highlightjs.org) is my recommended solution for highlighting syntax.

***

# Examples

Image(file):

![](ipfs://QmSRNZmzpbvXPBu7d9wyBncBQJAWAEZSwBrLoceVUXeSqy)

Image(url):

![](https://gateway.fxhash2.xyz/ipfs/QmSRNZmzpbvXPBu7d9wyBncBQJAWAEZSwBrLoceVUXeSqy)

Table:

| Header  | HeaderB  |
| :------ | :------- |
| Content | ContentB |

Video(file):

::video[]{src="ipfs://QmZXK1bTJ7rUsBX3E5tvRw8BFXkhtQsMiHkTDmmmx8Nj1r"}

Video(youtube)

::embed-media[]{href="https://youtu.be/OECTsZT_83g?si=b8CjlebPfjhHJw7e"}

Spotify Embed:

::embed-media[]{href="https://open.spotify.com/track/3szVFyeHVLqs1fAXLqBbio?si=b826b52151fa4121"}

Tezos Content(Currently Unsupported):

::tezos-storage-pointer[]{contract="KT1EfsNuqwLAWDd3o4pvfUx1CAh5GMdTrRvr" path="token_metadata::147967"}

List:

-   item
-   item
-   item

```js
const myFunction = () => {
  return(        
        <div className="article-container">
            <h1>{article.title}</h1>
            <h3>{article.description}</h3>
            <br></br>
            <Markdown className='article'>{article.body}</Markdown>
        </div>
    )
}
```

Math(LaTeX):

$$
E = mc^ 2 
$$

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::22785" data_spec="FX-GEN-DATA-002"}

This article is hosted on my website using this very component: [chrismccully.com/blog](https://www.chrismccully.com/blog)

50% of this article's proceeds are donated to Girls Who Code


A React component which retrieves an fx(text) article from the fx(hash) API and converts Markdown to JSX

I use rules to express myself. 
Austin, TX.

fxtext-react

Written by

Editions

Share

Details

stay ahead with our newsletter