DEV Community

Niklas Kiefer
Niklas Kiefer

Posted on

2 1

A Lightweight React Library for creating clickable Prototypes

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>
    )
  }
}

Enter fullscreen mode Exit fullscreen mode

This will result in the following prototype

Alt Text

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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay