HyperComponent
Your Hyperstack Application is built from a series of Components which are Ruby Classes that display portions of the UI. Hyperstack Components are implemented using React, and can interoperate with existing React components and libraries. Here is a simple example that displays a ticking clock:
1
# Components inherit from the HyperComponent base class
2
# which supplies the DSL to translate from Ruby into React
3
# function calls
4
class Clock < HyperComponent
5
# Components can be parameterized.
6
# in this case you can override the default
7
# with a different format
8
param format: "%m/%d/%Y %I:%M:%S"
9
# After_mount is an example of a life cycle method.
10
after_mount do
11
# Before the component is first rendered (mounted)
12
# we setup a periodic timer that will update the
13
# current_time instance variable every second.
14
# The mutate method signals a change in state
15
every(1.second) { mutate @current_time = Time.now }
16
end
17
# every component has a render block which describes what will be
18
# drawn on the UI
19
render do
20
# Components can render other components or primitive HTML or SVG
21
# tags. Components also use their state to determine what to render,
22
# in this case the @current_time instance variable
23
DIV { @current_time.strftime(format) }
24
end
25
end
Copied!
The following chapters cover these aspects and more in detail.
Copy link