As a little Holiday project, and as a follow-up of the DMN Innovation Week we had at Camunda, I created a small React components library to quickly create clickable prototypes.
Inside Innovation Week, we created multiple small prototypes to test various ideas on how to improve the DMN experience in bpmn-io. Inside that, I used jquery
to create a click-prototype and use it inside user tests. The results can be seen in this GitHub repository.
Yes, jquery is not the best solution to save the application state, like to save the actually visible view. Therefore I wanted to have a simple library that managed the interaction between different screens/views and where I only have to declare the click points which should direct to the next view.
I've chosen React
and created the clickable-prototype
project. It offers different components to declare your clickable prototype. A simple React Application using that would like that
import React, { Component } from 'react'
import { View, HitBox, ViewContainer } from 'clickable-prototype'
import view1 from './views/view1.png'
import view2 from './views/view2.png'
export default class App extends Component {
render () {
return (
<div>
<h1><span>clickable-prototype</span> Demo</h1>
<ViewContainer defaultView='view1' className='container'>
<View
key='view1'
className='custom-view'
screen={view1}
width='1220px'
height='630px'>
<HitBox
position={{y: 380, x: 477, width: 280, height: 60}}
to='view2' />
</View>
<View
key='view2'
className='custom-view'
screen={view2}
width='1220px'
height='630px'>
<HitBox
position={{y: 490, x: 477, width: 280, height: 60}}
to='view1' />
</View>
</ViewContainer>
</div>
)
}
}
This will result in the following prototype
It's a very early stage of the library but it helps me a lot to quickly create clickable prototypes without any extra fancy stuff as you'd have in applications like InVision.
I would really appreciate if you give it a try and give some feedback!
Top comments (0)