1.0.3-beta.0 • Public • Published

    Article Body: An Arc Core Component

    What does this do?

    When used in a Fusion Project, this Core Component can be used to render content elements of an ANS Story.

    The Article Body currently supports the following ANS elements:

    • Text
    • Images
    • Corrections
    • Interstitial Links
    • Lists
    • Raw HTML
    • Quotes
    • BlockQuotes (Quotes that have subtype "blockquote" on them)
    • Headers
    • Oembeds (Facebook, Twitter, Instagram, Youtube)

    How do I use it?

      import ArticleBody from '@arc-core-components/feature_article-body'
      <ArticleBody data={yourArrayOfContentElements} renderElement={yourCustomRenderElementFunction}>

    Take a look in the src/mocks file to see a suggested implementation, in article-body.mdx.

    How do I add my own classes to the article body elements?

    See Default rendering with element classes in src/article-body.mdx.

    How do I add my own custom components (such as a Video Player or a Gallery)?

    See the Extending default rendering example in src/article-body.mdx.

    Prop Name Type Description Required?
    data array The Content Elements of an ANS story. X
    renderElement function Overwrite any content elements with your own component.
    elementClasses object Specify CSS classes to be used on the default markup.
    isAdmin bool Pass from Fusion if you'd like to display an error message only in the admin. By default, this is false.

    How do I render elements inline (such as ads, related content or a call to action)?

    The Core Component will render any type of element that has a type of inline_element. So something like this:

    const inlineAd = {
      type: "inline_element",
      element: <div>Any JSX element</div>

    Will be rendered within the Core Component.

    Your job is to place it in the proper place in the content_elements array from within your Component repo.

    Please note that you must pass in a completely constructed inline element -- the Core Component will render it as is.

    You can use the renderElement method to change the default implementation of the Core Component, if you need to.

    How can I view what's in there quickly?

    Run npm i && npm run docz:dev after cloning to see what is within.

    Testing & Linting

    We are using Jest and XO for testing and linting.

    We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.

    To test: npm test

    To lint: npm run lint - This will also fix any simple linter errors automatically.

    To push without testing or linting: git push --no-verify - This can often be helpful if you just need to push a branch for demonstration purposes or for help.




    npm i @arc-core-components/feature_article-body

    DownloadsWeekly Downloads






    Unpacked Size

    944 kB

    Total Files


    Last publish


    • styonsk
    • maddoxnelson
    • amyerz
    • danielkim1
    • design1online
    • juliebacon
    • yonm
    • dan-weaver
    • imaus10
    • wyattjohnston
    • badmintonkid
    • npmwbcook
    • npmcojocaruv
    • robin.giannattasio
    • arcsubs
    • chenghsinw