Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Any View file can be also wrapped with JavaScript logic to make a Smart View.

With Counter.view file like:

  color black
  text <number 1

We can add a Counter.view.logic.js file that would increment a number by one every second like this:

import Counter from './Counter.view.js'
import React, { useEffect, useState } from 'react'

let CounterLogic = props => {
  let [number, setNumber] = useState(0)

  useEffect(() => {
    let interval = setInterval(() => setNumber(number + 1), 1000)
    return () => clearInterval(interval)

  return <Counter number={number} />
export default CounterLogic

A logic file is an extension to your view and Views imports that it if it's available. In other words, if you then use your Counter in other views, you will actually be using the Counter.view.logic.js instead.

This is where you would add any intermediate state to your views or connect them to an external store of data.

Control global state

Here's the video to the session that shows how to manage global state:

Control global state session

Here's the link to the repo shown in the video.

Example on showing a list data coming from a service

We would use logic files for that containing the logic to fetch external data.

Say you have a Posts.view like:

Posts List
  from <

And another one Post.view (to show the actual post):

Post Vertical
    text <title This is the title
    text <body This is the body of the post. Lots of stuff goes in here.

You’d then add a Posts.view.logic.js file that will have the fetching logic in React like:

import React, { useState, useEffect } from 'react'
import Posts from './Posts.view.js'

export default function PostsLogic(props) {
  let [ posts, setPosts ] = useState([])
  useEffect(() => {
      .then(res => res.json())
  },  [])

  return <Posts {...props} from={posts} />

So say you’re then using the Posts in App.view like:

App Vertical

Views Morpher will recognise the logic file automatically for you and use that instead of the view.

In Views Tools you will see three elements rendered on the list with placeholder data on it so you can design it.

Reach out with questions via our Slack Questions Channel. Mention @tom or @dario to make sure that we get your notifications.

You can’t perform that action at this time.