Start!
Learn ▼
Unit 0: Introduction
Unit 1: Structure
Unit 2: State
Unit 3: Style
Unit 4: Positioning
Unit 5: Custom Components
Unit 6: Routing
Unit 7: Animations
Unit 8: Storage
Docs
Sponsor
Playground
Components
View
Text
Header
Section
Subsection
Regular Text
Input
Select option
Icon
Standard
HTML
<img>, <p>, <input>, <div>, ...
React Native
Image, Text, TextInput, View, ...
Functions
State
App
Theme
Standard Components
In oneJS you can use the full set of standard HTML tags and React Native components out of the box; import them from the @onejs-dev/components package and use them as any other function component. You can also choose to set them up yourself by using the BaseComponent function.
The table below contains the full list of HTML tags. You can use all of them in oneJS for web just by importing the corresponding function name from @onejs-dev/components.
Tag
Function
Description
Has Children
<a>
HtmlA
Yes
<abbr>
HtmlAbbr
Yes
<address>
HtmlAddress
Yes
<area>
HtmlArea
No
<article>
HtmlArticle
Yes
<aside>
HtmlAside
Yes
<audio>
HtmlAudio
Yes
<b>
HtmlB
Yes
<base>
HtmlBase
No
<bdi>
HtmlBdi
Yes
<bdo>
HtmlBdo
Yes
<blockquote>
HtmlBlockquote
Yes
<body>
HtmlBody
Yes
<br>
HtmlBr
No
<button>
HtmlButton
Yes
<canvas>
HtmlCanvas
Yes
<caption>
HtmlCaption
Yes
<cite>
HtmlCite
Yes
<code>
HtmlCode
Yes
<col>
HtmlCol
No
<colgroup>
HtmlColgroup
No
<data>
HtmlData
Yes
<datalist>
HtmlDatalist
Yes
<dd>
HtmlDd
Yes
<del>
HtmlDel
Yes
<details>
HtmlDetails
Yes
<dfn>
HtmlDfn
Yes
<dialog>
HtmlDialog
Yes
<div>
HtmlDiv
Yes
<dl>
HtmlDl
Yes
<dt>
HtmlDt
Yes
<em>
HtmlEm
Yes
<embed>
HtmlEmbed
No
<fieldset>
HtmlFieldset
Yes
<figcaption>
HtmlFigcaption
Yes
<figure>
HtmlFigure
Yes
<footer>
HtmlFooter
Yes
<form>
HtmlForm
Yes
<h1>
HtmlH1
Yes
<h2>
HtmlH2
Yes
<h3>
HtmlH3
Yes
<h4>
HtmlH4
Yes
<h5>
HtmlH5
Yes
<h6>
HtmlH6
Yes
<head>
HtmlHead
Yes
<header>
HtmlHeader
Yes
<hr>
HtmlHr
No
<html>
HtmlHtml
Yes
<i>
HtmlI
Yes
<iframe>
HtmlIframe
Yes
<img>
HtmlImg
No
<input>
HtmlInput
No
<ins>
HtmlIns
Yes
<kbd>
HtmlKbd
Yes
<label>
HtmlLabel
Yes
<legend>
HtmlLegend
Yes
<li>
HtmlLi
Yes
<link>
HtmlLink
No
<main>
HtmlMain
Yes
<map>
HtmlMap
Yes
<mark>
HtmlMark
Yes
<meta>
HtmlMeta
No
<meter>
HtmlMeter
Yes
<nav>
HtmlNav
Yes
<noscript>
HtmlNoscript
Yes
<object>
HtmlObject
Yes
<ol>
HtmlOl
Yes
<optgroup>
HtmlOptgroup
Yes
<option>
HtmlOption
Yes
<output>
HtmlOutput
Yes
<p>
HtmlP
Yes
<param>
HtmlParam
No
<picture>
HtmlPicture
Yes
<pre>
HtmlPre
Yes
<progress>
HtmlProgress
Yes
<q>
HtmlQ
Yes
<rp>
HtmlRp
Yes
<rt>
HtmlRt
Yes
<ruby>
HtmlRuby
Yes
<s>
HtmlS
Yes
<samp>
HtmlSamp
Yes
<script>
HtmlScript
Yes
<section>
HtmlSection
Yes
<select>
HtmlSelect
Yes
<small>
HtmlSmall
Yes
<source>
HtmlSource
No
<span>
HtmlSpan
Yes
<strong>
HtmlStrong
Yes
<style>
HtmlStyle
Yes
<sub>
HtmlSub
Yes
<summary>
HtmlSummary
Yes
<sup>
HtmlSup
Yes
<svg>
HtmlSvg
Yes
<table>
HtmlTable
Yes
<tbody>
HtmlTbody
Yes
<td>
HtmlTd
Yes
<template>
HtmlTemplate
Yes
<textarea>
HtmlTextarea
Yes
<tfoot>
HtmlTfoot
Yes
<th>
HtmlTh
Yes
<thead>
HtmlThead
Yes
<time>
HtmlTime
Yes
<title>
HtmlTitle
Yes
<tr>
HtmlTr
Yes
<track>
HtmlTrack
No
<u>
HtmlU
Yes
<ul>
HtmlUl
Yes
<var>
HtmlVar
Yes
<video>
HtmlVideo
Yes
<wbr>
HtmlWbr
No
The table below contains the full list of React Native components. You can use all of them in oneJS native just by importing the corresponding function name from @onejs-dev/components.
Tag
Function
Description
Has Children
ActivityIndicator
RNActivityIndicator
No
Button
RNButton
No
FlatList
RNFlatList
No
Image
RNImage
No
ImageBackground
RNImageBackground
Yes
KeyboardAvoidingView
RNKeyboardAvoidingView
Yes
Modal
RNModal
Yes
Pressable
RNPressable
Yes
RefreshControl
RNRefreshControl
No
ScrollView
RNScrollView
Yes
SectionList
RNSectionList
No
StatusBar
RNStatusBar
No
Switch
RNSwitch
No
Text
RNText
Yes
TextInput
RNTextInput
No
TouchableHighlight
RNTouchableHighlight
Yes
TouchableOpacity
RNTouchableOpacity
Yes
TouchableWithoutFeedback
RNTouchableWithoutFeedback
Yes
View
RNView
Yes
VirtualizedList
RNVirtualizedList
No
DrawerLayoutAndroid
RNDrawerLayoutAndroid
Yes
TouchableNativeFeedback
RNTouchableNativeFeedback
Yes
InputAccessoryView
RNInputAccessoryView
Yes
SafeAreaView
RNSafeAreaView
Yes
import {app, read, update} from '@onejs-dev/core'; import {HtmlDiv, HtmlH1, HtmlInput} from '@onejs-dev/components'; const state = {name: 'World'} const App = () => HtmlDiv()([ HtmlH1()(`Hello ${read('name')}!`), HtmlInput({value: read('name'), onChange: update('name'), placeholder: 'Name'}) ]); app({component: App, state: state});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
View
A powerful component that acts as a container for other base components. It behaves like an HTML div block with some additional features such as routing, positioning, animations and lifecycle events.
Name
Type
Mandatory
Description
Default
type
String
No
Only used for web. Indicates the type of HTML container component to be rendered. The possible values are: div, header, nav | navbar, article, section, main and footer.
div
visible
Boolean
No
Determines whether the View is visible on the screen or not.
true
onVisibleChange
Function
No
The function called when the visible property is modified due to state changes.
content
Object
No
The configuration specifying the positioning of the component's children. Learn all about it in Unit 4.
self
Object
No
The configuration specifying the positioning of the component itself with respect to its parent. Learn all about it in Unit 4.
animation
Object
No
The animation to be executed on the component for the different property value changes. Learn all about it in Unit 7.
url
String
No
Determines the url where the app is routed to when the element is clicked. Learn all about it in Unit 6.
flavor
Object
No
The group of theme variables used to style the component. Applicable variables:
backgroundGradient: Component's background gradient.backgroundColor: Component's background color. It cannot be used in conjunction with backgroundGradient.borderWidth: Component's border width.borderColor: Component's border color.radius: Component's border radius.shadow: Component's drop shadow depending on the elevation.Learn all about it in Unit 3.
structure
Component
No
The structure to be rendered inside the component.
Type
Description
Component
The View component wrapping the input structure.
import {app, read, update, readFlavor, readStyle} from '@onejs-dev/core'; import {View, Input, Text} from '@onejs-dev/components'; const state = { visible: true, onVisibleChange: () => {console.log("'visible' property changed!")}, contentDirection: 'row', selfExpand: 0, animationVisible: 'fade-in', url: '/test', flavorId: 'primaryBackground' } const contentDirectionOptions = ['row', 'column']; const selfExpandOptions = [0, 1]; const animationVisibleOptions = ['fade-in', 'expand']; const flavorOptions = ['primaryBackground', 'rejectBackground']; const style = { text: {width: 200}, view: {width: 60, height: 60} }; const App = () => { return View({content: {direction: 'row', h: 'center', v: 'center', wrap: true, gap: 10}, self: {expand: 1}})([ View()([Text({flavor: readFlavor('bold'), style: readStyle('text')})('Visible:'), Input({type: 'switch', value: read('visible'), onChange: update('visible')})]), View()([Text({flavor: readFlavor('bold'), style: readStyle('text')})('Content direction:'), Input({type: 'list', options: contentDirectionOptions, value: read('contentDirection'), onChange: update('contentDirection')})]), View()([Text({flavor: readFlavor('bold'), style: readStyle('text')})('Self expand:'), Input({type: 'range', value: read('selfExpand'), onChange: update('selfExpand'), min: 0, max: 4})]), View()([Text({flavor: readFlavor('bold'), style: readStyle('text')})('Visible animation:'), Input({type: 'list', options: animationVisibleOptions, value: read('animationVisible'), onChange: update('animationVisible')})]), View()([Text({flavor: readFlavor('bold'), style: readStyle('text')})('Flavor:'), Input({type: 'list', options: flavorOptions, value: read('flavorId'), onChange: update('flavorId')})]), View({flavor: readFlavor('lightBackground'), self: {expand: 1}, content: {h: 'space', v: 'top', gap: 20, direction: read('contentDirection')}})([ View({self: {expand: 1}, flavor: readFlavor('outline'), style: readStyle('view')})(), View({visible: read('visible'), flavor: readFlavor(read('flavorId')), self: {expand: read('selfExpand')}, animation: {visible: [read('animationVisible'), 'fade-out']}, style: readStyle('view')})(Text()()), View({self: {expand: 1}, flavor: readFlavor('outline'), style: readStyle('view')})(), View({self: {expand: 1}, flavor: readFlavor('outline'), style: readStyle('view')})(), ]) ]); }; app({component: App, state: state, style: style, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
Input
Wrapper component for all the different types of inputs. It allows to work seamlessly with the different types of inputs and react to the change events. It also provides styling options through the use of flavors.
Name
Type
Mandatory
Description
Default
type
String
Yes
The type of input to be displayed. The following values are allowed:
text: Box to input single-line text strings.textarea: Box to input multi-line text strings.select | list: Dropdown with multiple options.range: Slider with draggable thumb allowing to select numbers within a range.switch: On and off switch button.checkbox: Small box followed by a text that permits the user to make a binary choice.button | submit | reset: Clickable box with a text, icon or both.text
options
Array(String) or Array(Object)
No
An array containing the different options to be displayed in the dropdown. You can write options in any of the following two ways:
/* Array(String) */
stringOptions = ['Option A', 'Option B'];
/* Array(Object) */
objectOptions = [
{value: 'A', label: 'Option A'},
{value: 'B', label: 'Option B'}
];title
String
No
The text to be displayed in button and checkbox inputs.
titleStyle
Object
No
The style object for the title text.
icon
Object
No
An optional SVG icon for button inputs
iconStyle
Object
No
The style object for the icon.
flavor
Object
Yes
The group of theme variables used to style the component. Applicable variables:
textColor: Component's font color.textFont: Component's font family.textSize: Component's font size.textWeight: Component's font weight.primaryColor: Component's focus outline color. For range input it is the slider's selected background. For switch input it is the background for the on state. For the checkbox input it is the icon's checked state color.neutralColor: Component's placeholder's font color. For range input it is the slider's unselected background. For switch input it is the border color. For the checkbox input it is the icon's unchecked state color.lightColor: checkbox input's hover color.backgroundGradient: Component's background gradient.backgroundColor: Component's background color. It cannot be used in conjunction with backgroundGradient.borderWidth: Component's border width.borderStyle: Component's border style.borderColor: Component's border color.radius: Component's border radius.shadow: Component's drop shadow depending on the elevation.Learn all about it in Unit 3.
default flavor
Type
Description
Component
The Input component.
import {app, read, update, readFlavor} from '@onejs-dev/core'; import {View, Input, Text} from '@onejs-dev/components'; const state = { inputValue: '', inputType: 'text' }; const inputTypes = ['text', 'textarea', 'button', 'list', 'range', 'checkbox', 'switch']; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text({flavor: readFlavor('header')})('Choose Input'), Input({type: 'list', options: inputTypes, value: read('inputType'), onChange: update('inputType')}), Input({ type: read('inputType'), value: read('inputValue'), onChange: update('inputValue'), title: 'Input Title', placeholder: 'Input Placeholder', options: ['A', 'B', 'C'] }), Text()('Input Value: ' + read('inputValue')) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
Text
A component to display texts and lists. On the web, it is converted to p, h1, h2, h3 and h4 tags depending on the type. All the texts in the app should be wrapped in a Text component.
Name
Type
Mandatory
Description
Default
type
String
No
The importance of the text according to the following hierarchy:
title: The main title of the app.header: The header of each of the pages in your app.section: Section header within a page.subsection: Subsection header within a section.link
String or Array(Object)
No
Web only. Creates a hyperlink for the selected text and url. This property can take two types of inputs:
emphasis
String
No
Web only. An array of objects specifying the partial text to be emphasized and the style object to be applied for that text.
code
Array(String)
No
Web only. An array of strings specifying the partial texts to be formatted as source code; a monospace font and a light highlight color is applied.
list
String
No
Web only. Displays the text in a list. For numbers value, it creates a numbered list. For bullets value, it creates circular bullets.
flavor
Object
Yes
The group of theme variables used to style the component. Applicable variables:
textColor: Text color.textGradient: Text gradient definition.textFont: Font family of the text.textSize: Size of the text in pixels.textWeight: Weight of the text ranging from light to bold.primaryColor: Hyperlinks are displayed using this color.lightColor: Highlight color for the text in the code property.Learn all about it in Unit 3.
default flavor
structure
String
No
The text string to be rendered.
Type
Description
Component
The Text component.
import {app, read, update, readFlavor} from '@onejs-dev/core'; import {View, Input, Text} from '@onejs-dev/components'; const state = { textType: 'title', inputType: 'text' }; const textTypes = ['title', 'header', 'section', 'subsection']; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text({flavor: readFlavor(read('textType'))})('Title Text'), Input({type: 'list', options: textTypes, value: read('textType'), onChange: update('textType')}), Text({ emphasis: [{text: 'emphasis', style: {fontWeight: 'bold'}}], link: [{text: 'hyperlinks', url: '', target: '_blank'}], code: ['code'] })(`Sample text to display emphasis, hyperlinks, code and lists:`), Text({list: 'bullets'})(`Item A Item B Item C`) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
Icon
A component for SVG icons. SVG icons must be provided as raw strings. There are two easy options to achieve this:
export myIconFont = {icon1: '<svg>...</svg>', icon2: '<svg>...</svg>'};Name
Type
Mandatory
Description
Default
icon
Object
Yes
The SVG icon imported as a raw string.
raised
Boolean
No
If true, adds background to the icon simulating a raised button.
false
size
Number or Object
No
Specifies the icon's size. This property can take two types of inputs:
width and height are equal.width and height number properties.32
flavor
Object
Yes
The group of theme variables used to style the component. Applicable variables:
primaryGradient: Component's gradient color.primaryColor: Component's primary color. It cannot be used in conjunction with primaryGradient.backgroundColor: Component's background color. Usable only if raised property is true.borderWidth: Component's border width. Usable only if raised property is true.borderStyle: Component's border style. Usable only if raised property is true.borderColor: Component's border color. Usable only if raised property is true.radius: Component's border radius. Usable only if raised property is true.shadow: Component's drop shadow depending on the elevation. Usable only if raised property is true.Learn all about it in Unit 3.
default flavor
Type
Description
Component
The Icon component.
import {app, read, update, readFlavor} from '@onejs-dev/core'; import {View, Input, Text, Icon} from '@onejs-dev/components'; import {icons} from '@onejs-dev/icons'; const state = { raised: false, size: 64 }; const textTypes = ['title', 'header', 'section', 'subsection']; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text({flavor: readFlavor('header')})('Icons'), Input({type: 'switch', value: read('raised'), onChange: update('raised')}), Input({type: 'range', value: read('size'), onChange: update('size'), min: 32, max: 64}), Icon({icon: icons['water'], raised: read('raised'), flavor: readFlavor('primaryGradient', 'shadow'), size: read('size')}), Icon({icon: icons['flame'], raised: read('raised'), flavor: readFlavor('rejectGradient', 'shadow'), size: read('size')}), Icon({icon: icons['leaf'], raised: read('raised'), flavor: readFlavor('acceptGradient', 'shadow'), size: read('size')}) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
read
Reads the current value of the corresponding state variable. This is the main function to return the current value for the state variables of the app. You can learn more about the usage of state variables in Unit 2.
Name
Type
Mandatory
Description
Default
stateId
String
Yes
The unique name given to the state variable to be read.
documentId
String
No
If the state variable is an array of objects, documentId represents the id property within the object to be read. It can be used to fetch a document within a list of objects (collection) retrieved from a database.
Type
Description
Any
The value for the corresponding state variable.
import {app, read} from '@onejs-dev/core'; import {View, Text} from '@onejs-dev/components'; const state = { framework: 'oneJS', list: [{id: 'js', name: 'JavaScript'}, {id: 'css', name: 'CSS'}, {id: 'html', name: 'HTML'}] }; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text()('My favorite framework: ' + read('framework')), Text()('My favorite language: ' + read('list', 'js').name), ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
update
Updates the value of state variables on change events. If defined, it syncs the modification with local or external databases. You can learn more about the usage of state variables in Unit 2.
Name
Type
Mandatory
Description
Default
stateId
String
Yes
The unique name given to the state variable to be update.
documentId
String
No
If the state variable is an array of objects, documentId represents the id property within the object to be updated. It can be used to update a document within a list of objects (collection) retrieved from a database.
event
Object or Any
Yes
Contains the value to update the state variable. It can be provided in two ways:
None
import {app, read, update} from '@onejs-dev/core'; import {View, Text, Input} from '@onejs-dev/components'; const state = {result: 5}; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text()('Result: ' + read('result')), Input({type: 'number', value: read('result'), onChange: update('result')}), Input({type: 'button', title: 'Add one', onClick: () => { const result = Number(read('result')) + 1; update('result')(result); }}) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
add
Adds a new value into the state variable array. You can use it to add a new document to the collection in the database. If defined, it syncs the modification with local or external databases. You can learn more about the usage of state variables in Unit 2.
Name
Type
Mandatory
Description
Default
stateId
String
Yes
The unique name given to the state variable where the new value is added.
event
Object or Any
Yes
Contains the value to be added the state variable. It can be provided in two ways:
None
import {app, read, update, add} from '@onejs-dev/core'; import {View, Input, Text} from '@onejs-dev/components'; const state = {note: '', notes: []}; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ View()([ Input({type: 'text', value: read('note'), onChange: update('note')}), Input({type: 'button', title: 'Save', onClick: () => add('notes')(read('note'))}) ]), read('notes').map(note => Text({list: 'bullets'})(note)) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
remove
Removes the value from the state variable. If the documentId is specified and the state variable is an array of objects, it removes the object with an id matching the documentId. If defined, it syncs the modification with local or external databases. You can learn more about the usage of state variables in Unit 2.
Name
Type
Mandatory
Description
Default
stateId
String
Yes
The unique name given to the state variable to be removed.
documentId
String
No
The id of an object in an array. It can be used to remove a document within a list of objects (collection) retrieved from a database.
None
import {app, read, update, remove, readFlavor} from '@onejs-dev/core'; import {View, Text, Input} from '@onejs-dev/components'; const state = { id: '', languages: [ {id: 'zh', name: 'Chinese'}, {id: 'en', name: 'English'}, {id: 'es', name: 'Spanish'}, {id: 'hi', name: 'Hindi'} ] }; const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ Text({flavor: readFlavor('section')})('Languages in my CV: '), View()([ Input({type: 'text', value: read('id'), onChange: update('id'), placeholder: 'Language id'}), Input({type: 'button', title: 'Remove', flavor: readFlavor('reject'), onClick: () => { remove('languages', read('id')); }}) ]), read('languages').map(language => Text()(language.name)) ]); app({component: App, state: state, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
BaseComponent
A Higher Order Component (HOC) that transforms any HTML tag or React component into a pure JavaScript function. You can import your components created on React and React Native and use them in oneJS through this HOC. You can check the docs for the standard components created using BaseComponent.
Name
Type
Mandatory
Description
Default
name
String
Yes
Unique name for the component.
hasChildren
Boolean
Yes
Specifies whether the component accepts a nested component. E.g.: This property is true for View components and false for Input components.
ComponentFunctionOrTag
String or Component
Yes
It can be provided in two ways:
Type
Description
Component
The component function created.
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
Component
A Higher Order Component (HOC) that optimizes the input JavaScript function component. This is the main method to create your own custom components. You can learn more about custom components in Unit 5.
Name
Type
Mandatory
Description
Default
name
String
Yes
Unique name for the component.
hasChildren
Boolean
Yes
Specifies whether the component accepts a nested component. E.g.: This property is true for View components and false for Input components.
ComponentFunction
Component
Yes
A JavaScript function receiving properties and returning a component structure.
Type
Description
Component
The component function created.
import {app, Component, readFlavor} from '@onejs-dev/core'; import {View, Text, Input} from '@onejs-dev/components'; const H1Text = Component('H1Text', true, ({color, ...attributes}={}) => structure => { const titleStyle = {fontSize: 32, color: color, fontWeight: 'bold'}; return Text({style: titleStyle, ...attributes})(structure); }); const RangeInput = Component('RangeInput', false, ({label, ...attributes}={}) => { return View({content: {v: 'center', gap: 20}})([ Text()(label), Input({type: 'range', ...attributes}) ]); }); const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([ H1Text({color: 'blue'})('Custom Title'), RangeInput({label: 'Range Input', value: 5, min: 1, max: 10}) ]); app({component: App, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
app
Main function to set up the app and render the resulting component on screen. All the configuration required to run the app is provided to this function.
Name
Type
Mandatory
Description
Default
name
String
No
Unique name for the app. Used to set up IndexedDB storage.
component
Component
Yes
A component function that returns the structure of the app.
state
Object
No
The configuration object to setup the state. Declares all the state variables along with the source and storage setup. You can learn more about state management in Unit 2.
theme
String or Object
No
The collection of flavors that will be used to style the app. It can be specified in two ways:
style
Object
No
The CSS in JavaScript style object describing the look and feel of the app. You can learn more about app styling in Unit 3.
font
Object
No
An object referencing the fonts to be loaded for the app. The property keys of the object represent the font-family name, while the value is a require() function call with its location as argument.
firestore
Object
No
The initialized Firebase Firestore Cloud database object to enable synching the state updates. You can learn more about data storage in Unit 8.
None
import {app, read, update, readFlavor, readStyle} from '@onejs-dev/core'; import {Text, Input} from '@onejs-dev/components'; app({name: 'myApp', component: () => { return [ Text({flavor: readFlavor('title')})('Hello ' + read('name')), Input({style: readStyle('outline'), value: read('name'), onChange: update('name')}) ] }, state: {name: ''}, theme: { variables: {textFont: 'monospace'}, flavors: {title: {textColor: 'blue'}} }, style: {outline: {border: '2px solid red'}}, });
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
readFlavor
Retrieves the theme variables and corresponding value for the selected flavorId. If multiple flavor ids are provided, combines the desired flavors applying left to right increasing priority.
To use this function, you must first configure the flavor property of the app function. You can learn more about theming in Unit 3.
Name
Type
Mandatory
Description
Default
flavorId
String
Yes
One or multiple strings with the ids of the flavors to be retrieved.
Type
Description
Object
An object containing the theme variables and values corresponding to the flavor.
import {app, readFlavor} from '@onejs-dev/core'; import {Text} from '@onejs-dev/components'; const theme = { flavors: { gradient: { textGradient: { angle: 45, colors: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'] }, }, bigText: { textSize: 50 } } }; const App = () => { return Text({ flavor: readFlavor('gradient', 'bigText'), style: {width: 'fit-content'} })('Hello World!'); } app({component: App, theme: theme});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
readStyle
Returns the style configuration associated to the style ids selected. If multiple style ids are provided, combines the desired styles applying left to right increasing priority.
To use this function, you must first configure the style property of the app function. You can learn more about styling in Unit 3.
Name
Type
Mandatory
Description
Default
flavorId
String
Yes
One or multiple strings with the ids of the styles to be retrieved.
Type
Description
Object
An object containing the theme variables and values corresponding to the flavor.
import {app, readStyle} from '@onejs-dev/core'; import {Text} from '@onejs-dev/components'; const style = { s1: {border: '1px solid red', color: 'green'}, s2: {fontSize: 32, color: 'blue'} }; const App = () => { return Text({style: readStyle('s1', 's2')})('Hello World!'); } app({component: App, style: style});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape
mergeStyles
Combines the desired styles applying left to right increasing priority. This is specially useful when creating a custom component providing a set of internal styles, and enabling to customize the style at instantiation. You can learn more about theming in Unit 3.
Name
Type
Mandatory
Description
Default
styles
Object
Yes
The list of styles to be merged as comma separated arguments.
Type
Description
Component
The result of merging the input styles.
import {app, mergeStyles, Component} from '@onejs-dev/core'; import {Text} from '@onejs-dev/components'; const externalStyle = {border: '1px solid red', color: 'green'}; const Hello = Component('Hello', false, ({name, ...attributes}={}) => { const internalStyle = {fontSize: 32, color: 'blue'}; attributes['style'] = mergeStyles(internalStyle, attributes['style']); return Text(attributes)(`Hello ${name}!`); }); const App = () => { return Hello({name: 'oneJS', style: externalStyle}); } app({component: App, theme: {preset: 'oneJS'}});
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape