Nascent Prototype Metaverse


    0.0.3 • Public • Published

    VF React extensions

    npm version


    This is an early alpha and subject to radical change or removal.

    This project has reusable code for many Visual Framework components, allowing them to be used in React projects like vf-react. It has reusable componentised code and config.


    1. Install this npm package (see Install section)
    2. Install and import your desired component:
      • import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
    3. Use your desired component
      • <VfCard card_title="test" variant="striped" newTheme="primary" card_image="" card_text="im some text" card_image__alt="people"></VfCard>

    Supported components

    React support is in its early stages and only a few components have support.

    • vf-card
    • vf-button

    Note for component makers

    This approach allows the (precompiled) Nunjucks templates to be used by react through the "nunjucks-slim" runtime. This means you'll always have access to the latest VF templates, but comes at a cost in the "reactivity" of the component.

    The vf-card.react.js component provides an example of how this method works:

    // vf-card for React
    // See vf-extensions-react for usage guidance
    // We use vanilla JS templates for react for compatibility with create react app
    // ---
    import React from "react";
    import Fragment from "react-dom-fragment";
    // eslint-disable-next-line no-unused-vars
    import VfCardTemplate from "./vf-card.precompiled.js"; // import templates before the nunjucks env
    import { vfNunjucksEnv } from "@visual-framework/vf-extensions-react/vf-extensions-react.js";
    // any JS actions needed on component insertion
    class VfCardCallback extends React.Component {
      componentDidMount() {
        // console.log("any JS actions needed");
      render() {
        return React.createElement(React.Fragment, null);
    const VfCard = React.memo(({
      variant, newTheme, card_image, card_text, card_image__alt, card_title
    }) => {
      return React.createElement(React.Fragment, null,
        React.createElement(Fragment, {
          dangerouslySetInnerHTML: {
            // our HTML is handled by nunjucks, this should not receive user input
            __html: vfNunjucksEnv.render("vf-card", {
              variant: variant, newTheme: newTheme, card_image: card_image, card_text: card_text, card_image__alt: card_image__alt, card_title: card_title
        React.createElement(VfCardCallback, null)
    export { VfCard };

    This approach should not be used when:

    • when a component contains large number of child components (vf-table, vf-grid)
    • when an item is interactive (vf-form elements)

    In the above cases it is better to create a "pure" Reactive .jsx component template. This allows react to remain efficient, to handle state and do "react magic".

    As an illustration: vf-table is likely to contain a large number of inner components, using the Nunjucks wrapper would result in many re-renders of the subtree.

    You can see an example of a pure react template — coming soon


    This repository is distributed with npm. After installing npm and yarn, you can install with this command.

    $ yarn add --dev @visual-framework/vf-extensions-react


    npm i @visual-framework/[email protected]




    Apache 2.0

    Unpacked Size

    117 kB

    Total Files


    Last publish


    • khawkins98
    • sturobsonembl