README.md

Alkali

Library to build reusable component, inspired by React.js.

• Basic Usage
  • Component
    • props
    • state
    • Lifecycle Methods
      • render
      • willMount
      • didMount
      • willReceiveProps
      • shouldUpdate
      • willUpdate
      • didUpdate
      • willUnmount
  • registerComponent
  • initAlkaliBrowserConfiguration
  • mountComponent

Basic Usage

Component

All UI logic will live within a Component. Component is abstract and should be extended for each new component you wish to create.

With Component you are given props and state, as well as the lifecycle methods.

props

props are an UnmodifiableMapView that are passed into the Component by whatever is rendering. Within a Component you have no control over the values within props.

state

state is a UnmodifiableMapView that is internal to the Component, whatever is rendering it has no control over the value of state. Within the Component you can only change the value of state by using the setState method.

Lifecycle Methods

getDefaultProps

Used to set the values to the used for Component.props if they are not set by the whatever is rendering the Component.

@override
Map getDefaultProps() => {
  'someCustomProp': 'defaultValue'
};

getInitialState

Used to set the default values used in Component.state. Since state is not set externally it is important to override this method.

@override
Map getInitialState() => {
  'someCustomState': `defaultValue`
}

render

render is the most important lifecycle method as this is used to build the UI. Should either return ComponentDescription or List<ComponentDescription> (if returning a List Component.domNode will not be set).

class CustomComponent extends Component {
  ComponentDescription render() {
    return h1({
      'children': 'Hello World!'
    });
  }
}

willMount

willMount is called once, right before initial rendering of the Component.

didMount

didMount is called once, right after the initial rendering of the Component.

willReceiveProps

willReceiveProps is called when the component is receiving new props from whatever is rendering it.

shouldUpdate

shouldUpdate is called right before applying new props and state if it returns false the Component will not be updated.

willUpdate

willUpdate is called right before applying new props and state.

didUpdate

didiUpdate is called right after applying new props and state.

willUnmount

willUnmount is called right before the Component is remove from the DOM.

registerComponent

In order to use a Component you have to register it by using the registerComponent function.

ComponentDescriptionFactory CustomComponentFactory = registerComponent(([Map props]) => new CustomComponent(props));

The returned ComponentDescriptionFactory is what will actually be used to render the Component.

initAlkaliBrowserConfiguration

Before trying to mount component you have to call the top- level initAlkaliBrowserConfiguration. This allows the Components to be updated.

mountComponent

To render a Component into actual DOM use the mountComponent function.

mountComponent(CustomComponentFactory(), querySelector('#dart-entry-point'));