Framework for React and Formula.
RUN expression.hrx is hyperscript + formula + xander
npm install --save hrx formula
A minimal hrx app with home and 404 page.
// Import the boot function to intialize hrx.
import { render } from "hrx";
// Define routes for your app.
let routes = [
{
path: "/",
component: props => "Hello, World."
},
{
path: "*",
component: props => "No Page Found"
}
];
// Boot the app into a root DOM element. Map your URLs to component to render.
render({ routes }, document.getElementById("root"));
Render HRX with React's render function.
// Import the boot function to intialize hrx.
import { app } from "hrx";
import React from "react";
import { render } from "react-dom";
// Define routes for your app.
let routes = [# hrx
[](https://circleci.com/gh/FormBucket/hrx)
## Overview
Framework for [React](https://github.com/facebook/react) and [Formula](https://github.com/FormBucket/formula).
## why hrx?
* **h** is for hyperscript.
* **r** is for `RUN` expression.
* **x** is for [xander](https://github.com/FormBucket/xander).
hrx is **h**yperscript + **f**ormula + **x**ander
## Usage
## Installation
```sh
npm install --save hrx formula
A minimal hrx app with home and 404 page.
// Import the boot function to intialize hrx.
import { render } from "hrx";
// Define routes for your app.
let routes = [
{
path: "/",
component: props => "Hello, World."
},
{
path: "*",
component: props => "No Page Found"
}
];
// Boot the app into a root DOM element. Map your URLs to component to render.
render({ routes }, document.getElementById("root"));
Render HRX with React's render function.
// Import the boot function to intialize hrx.
import { app } from "hrx";
import React from "react";
import { render } from "react-dom";
// Define routes for your app.
let routes = [
{
path: "/",
component: props => "Hello, World."
},
{
path: "*",
component: props => "No Page Found"
}
];
let App = app({ routes });
// Boot the app into a root DOM element. Map your URLs to component to render.
render(<App />, document.getElementById("root"));
A link component to hyperlink your app without annoying page refreshes.
import {Link} from 'hrx'
<Link to="/buckets" />
<Link type="button" to="/buckets" />
<Link type="button" to="/buckets" type="button" /> // render button tag instead of a
The Eval component calculates the result of a formula expression.
import {Eval} from 'hrx'
<Eval exp="SUM(A, B)" values={ A: 2, B: 2 } />
The Rule component renders HTML describing a formula expression.
import {Rule} from 'hrx'
<Rule exp="SUM(A, B)" />
The Container component renders a child component based on URL.
import { Link } from "hrx";
render(<Container />);
The Connect HOC component syncs Xander state with React state.
import { connect, Container } from "hrx";
render(
connect(Container) // <- boot function does just this
);
The Loadable HOC works with webpack to split your app into chunks that load dynamically.
import { loadable, loader } from "hrx";
let routes = [
{
path: "/",
component: loadable({
loader: () => import("./home"),
delay: 500 // 0.500 seconds
})
},
{
path: "*",
component: loader(() => import("./404"))
}
];
A minimal router, backed by native history API.
import { router } from "hrx";
router.open("/buckets/1");
Use redirect to modify URL without adding an entry to the history state.
router.redirect("/buckets");
Load routes and related configuration without boot.
import { router } from "hrx";
router.loadRoutes([
{
path: "/",
component: require("./pages/home")
}
]);
The window store (optional) keeps track of window size and scroll location; keeps in sync with DOM.
import { loadWindowStore } from "hrx";
loadWindowStore();
Use createStore to manage locally cached data.
import { createStore } from "hrx";# hrx
[](https://circleci.com/gh/FormBucket/hrx)
## Overview
Framework for [React](https://github.com/facebook/react) and [Formula](https://github.com/FormBucket/formula).
## why hrx?
* **h** is for hyperscript.
* **r** is for `RUN` expression.
* **x** is for [xander](https://github.com/FormBucket/xander).
hrx is **h**yperscript + **f**ormula + **x**ander
## Usage
## Installation
```sh
npm install --save hrx formula
A minimal hrx app with home and 404 page.
// Import the boot function to intialize hrx.
import { render } from "hrx";
// Define routes for your app.
let routes = [
{
path: "/",
component: props => "Hello, World."
},
{
path: "*",
component: props => "No Page Found"
}
];
// Boot the app into a root DOM element. Map your URLs to component to render.
render({ routes }, document.getElementById("root"));
Render HRX with React's render function.
// Import the boot function to intialize hrx.
import { app } from "hrx";
import React from "react";
import { render } from "react-dom";
// Define routes for your app.
let routes = [
{
path: "/",
component: props => "Hello, World."
},
{
path: "*",
component: props => "No Page Found"
}
];
let App = app({ routes });
// Boot the app into a root DOM element. Map your URLs to component to render.
render(<App />, document.getElementById("root"));
A link component to hyperlink your app without annoying page refreshes.
import {Link} from 'hrx'
<Link to="/buckets" />
<Link type="button" to="/buckets" />
<Link type="button" to="/buckets" type="button" /> // render button tag instead of a
The Eval component calculates the result of a formula expression.
import {Eval} from 'hrx'
<Eval exp="SUM(A, B)" values={ A: 2, B: 2 } />
The Rule component renders HTML describing a formula expression.
import {Rule} from 'hrx'
<Rule exp="SUM(A, B)" />
The Container component renders a child component based on URL.
import { Link } from "hrx";
render(<Container />);
The Connect HOC component syncs Xander state with React state.
import { connect, Container } from "hrx";
render(
connect(Container) // <- boot function does just this
);
The Loadable HOC works with webpack to split your app into chunks that load dynamically.
import { loadable, loader } from "hrx";
let routes = [
{
path: "/",
component: loadable({
loader: () => import("./home"),
delay: 500 // 0.500 seconds
})
},
{
path: "*",
component: loader(() => import("./404"))
}
];
A minimal router, backed by native history API.
import { router } from "hrx";
router.open("/buckets/1");
Use redirect to modify URL without adding an entry to the history state.
router.redirect("/buckets");
Load routes and related configuration without boot.
import { router } from "hrx";
router.loadRoutes([
{
path: "/",
component: require("./pages/home")
}
]);
The window store (optional) keeps track of window size and scroll location; keeps in sync with DOM.
import { loadWindowStore } from "hrx";
loadWindowStore();
Use createStore to manage locally cached data.
import { createStore } from "hrx";
createStore(name, reducerOrSpec, actionsAndQueries);
For more info checkout xander.
FAQs
Single page app framework
We found that hrx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.