Repository files navigation

↻ LoF Website

This lightweight and fast react library allows you to convert expressions – including the reentry – from Spencer-Brown's Laws of Form (1969) into interactive and pure HTML/CSS graphics. Moreover, LoF syntax highlighting, parsing and input fields are available.

Github

NPM

Author Portfolio

1. Easily transform LoF bracket expressions into interactive and customizable graphics.
2. Works with re-entries
3. Custom LoF input field with syntax highlighting
4. TS Support

npm install laws-of-form-react

Full tutorial available on theLoF react website

First import the library

importLoFfrom"laws-of-form-react"

1. A cross is marked with ()

<LoF>  ()</LoF>

2. Any text in space is interpreted as the content of the space

<LoF>  ((Observer) Society)</LoF>

3. You can nest crosses

<LoF>  ((())())</LoF>

4. A Re-Entry is made out of two identifiers. $id and [id]. $id denotes the space that enters into [id]. id must be a number. There can be multiple $ids in a space, but only the rightmost counts.

<LoF>  (([0]a)$0b)</LoF><LoF>(([42]$42)Autopoiesis)</LoF>

5. A space can also re-enter into two locations (see limitations).

<LoF>  (([0]c)([0]a)$0b)</LoF>

6. Multiple Re-Entries are also possible

<LoF>  ([3]([0]$0)([1]$1)$3)</LoF>

7. This is how you could implement the modulator function (see the first image above)

<LoFstyle={{fontSize:'20px'}}>  (((((((([0]a$1)$6[2])[1]$3)[0]$4)a$5)$2[6])[5]) [4]$0)</LoF>

This library provides customizable syntax highlighting for Laws of Form expressions.

import{SyntaxHighlighting}from"laws-of-form-react";...<SyntaxHighlighting>  $3(Syntax (highlighting) [3])</SyntaxHighlighting>...

Furthermore, the library offers an input field with LoF syntax highlighting.

import{LoFInput}from"laws-of-form-react";...const[input,setInput]=useState("");...<LoFInputvalue={input}onChange={(e)=>setInput(e.currentTarget.value)}className="foo"/>...

In this library, there is also a Laws of Form parser available that can generate a Laws of Form expression tree from the expressions listed above. This tree can be used for prerendering (LoF takes expressionTree as a prop), to make modifications after the parsing process has finished or for calculations. As an example, the data fields can be filled with React components to provide custom content apart from text.

import{parser}from"laws-of-form-react";// Do stuff ...constexpression="((a)(b))"constexpressionTree=parser.parse(expression);expressionTree.data=<SomeReactComponent1/>expressionTree.expressions[0].data=<SomeReactComponent2/>// Do some things with the expressionTree ...<LoFexpressionTree={expressionTree}/>

The entire drawing of the Crosses and Re-Entries is done using divs. Each cross is a div. This allows many degrees of freedom, for example dynamic updating, better debugging, embedding HTML/CSS content such as buttons, images, fonts, etc. But this also comes with limitations, especially for the Re-Entry. HTML/CSS permits to use at most one :before and :after peusdo element (which is used for the Re-Entry) per div. Thus for each Re-Entry we can have at most two spaces where it can re-enter. For the majority of cases, two re-enters per re-entry are perfectly sufficient. Sometimes using complicated nested Re-Entries it is necessary to rearrange expressions in case of display errors.

Portfolio