From React to Composi-Part 4

In this article we will show how to convert an advanced React timer to Composi. The source code for the original React project is available on Github. You can try out the live version here.

The finished Composi timer will look like this:

If you’re not familiar with Composi, you can check it out on its website:

Composi

If you don’t have it installed, you can install Composi like so:

npm i -g composi

After that, you can create a new project:

composi -n composi-advanced-timer

This will create a new basic Composi project on your desktop.

Copy the React Files to the Composi Project

Now you can copy the React files from the Github download to the Composi project. First copy the lib folder from the React project’s src folder over to the dev folder in the Composi project. Next open the React project’s components folder and copy the contents of the Timer folder to the components folder inside the Composi project’s dev folder.

Start the Conversion

Open the Controls.js folder in your editor. First thing to do is change the React import to import the h function from Composi. And since Composi has no PropTypes, any imports or code using them needs to be delete. This goes for all the React files:

// Change this:
import React from 'react';
import PropTypes from 'prop-types';
// To this:
import {h} from 'composi'

Remember to delete the two blocks of PropTypes at the end of the file:

Controls.defaultProps = {
   onStart: () => console.log('CONTROLS: START'),
   onStop: () => console.log('CONTROLS: STOP'),
   onResume: () => console.log('CONTROLS: RESUME'),
   onReset: () => console.log('CONTROLS: RESET'),
   canStart: false,
   status: null
};
Controls.propTypes = {
   onStart: PropTypes.func,
   onStop: PropTypes.func,
   onReset: PropTypes.func,
   onResume: PropTypes.func,
   canStart: PropTypes.bool,
   status: PropTypes.string
};

Next open up the Display.js file. Once again we need to switch to importing Composi and deleting all the PropType references:

// Change this:
import React from 'react';
import PropTypes from 'prop-types';
// To this:
import {h} from 'composi'

Then at the end of the file delete the following PropTypes:

Display.defaultProps = {
onFocusChange: input => console.log(input),
   onInputChange: () => { },
   hours: '00',
   minutes: '00',
   seconds: '00',
   timeInterval: null
};
Display.propTypes = {
   onFocusChange: PropTypes.func,
   onInputChange: PropTypes.func,
   hours: PropTypes.string,
   minutes: PropTypes.string,
   seconds: PropTypes.string,
   timeInterval: PropTypes.number
};

Next open the Keypad.js file. Once again import Composi and delete all references to PropTypes:

// Change this:
import React from 'react';
import PropTypes from 'prop-types';
// To this:
import {h} from 'composi'

And them delete this PropTypes from the end of the file:

Keypad.defaultProps = {
   onClick: (e) => console.log(e),
   status: null
};
Keypad.propTypes = {
   onClick: PropTypes.func,
   status: PropTypes.string
};

Finally, open the Timer.js file. Because this uses a React Component, we need to import the Composi equivalent:

// Change this:
import React, {Component} from 'react'
// To this:
import {h, Component } from 'composi';

The Final Bootstrap

Now we can make this timer work. Open the Composi project’s app.js file.

import {h, Component} from 'composi'
import {title} from './components/title'
import Timer from './components/Timer/timer';
// Set state on component.
// Will cause component to render.
title.setState('Advanced Timer')
const timer = new Timer()

With this you can now open your terminal, cd to the Composi timer project and run:

npm start

This will build and launch the timer in your default browser.

You can download the source code for this project from Github. Here’s the live version on Codepen:

You can check out the other articles of this series:

From React to Composi-Part 1

From React to Composi-Part 2

From React to Composi-Part 3

From React to Composi-Part 5

From React to Composi-Part 6

From React to Composi-Part 7

From React to Composi-Part 8

From React to Composi-Conclusion