Dash Tour Component

Hi community,

I have been using dash for quite some time (almost from the beginning). I really like the frame work and this weekend I decided to create my own component. Less complicated than I thought and the docs describe the steps really well. I ported reacttour, which will allow you to create your own tour trough your web app.

Note that this is the first time that I programmed in React, and this is thirst time I published anything to the open-source community. The port I made is very simple and does not include all the features yet. However in the upcoming weeks I will update the project and make it more complete.

In the mean time you can download it through pip: pip install dash-tour-component and run the demo

import dash_tour_component
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
app = dash.Dash(__name__)


app.layout = html.Div([
	dash_tour_component.DashTour(
		steps=[
			{
				'selector': '[id="my_first_step"]',
				'content': "This is my first step",
				# 'position': "center"
			},
			{
				'selector': '[id="my_second_step"]',
				'content': 'This is my second Step',
			}
		],
		isOpen=False,
		id="tour_component"
	),
	html.Button("Open Tour", id='open_tour_button'),
	html.Div("Test 1", id='my_first_step', style={'text-align': 'center'}),
	html.Div(style={'height': '400px'}),
	html.Div("Test 2", id='my_second_step', style={'text-align': 'center'})
])


@app.callback(
	Output('tour_component', 'isOpen'),
	[Input('open_tour_button', 'n_clicks')],
	prevent_initial_call=True
)
def open_tour_component(value):
	return True


if __name__ == '__main__':
	app.run_server(debug=True)

Non the less I need the help with the following:

In the steps you pass the content to the tour component. I tried to pass for example a html.Div() instead of a string. As soon as I run the app I get the error that is not a valid argument. I tried several things which did not work. If someone could point me in the correct direction that would be great!

Note, this is how I programmed/defined the steps:

/**
     * The steps in the tour component
     */
    steps: PropTypes.arrayOf(PropTypes.shape({
        'selector': PropTypes.string,
        'content': PropTypes.oneOfType([
            PropTypes.node,
            PropTypes.element,
            PropTypes.func,
        ]).isRequired,
        'position':PropTypes.oneOfType([
            PropTypes.arrayOf(PropTypes.number),
            PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),
        ]),
        'action': PropTypes.func,
        'style': PropTypes.object,
        'stepInteraction': PropTypes.bool,
        'navDotAriaLabel': PropTypes.string,
        })),

Second, is it also possible to pass a function? For example the action needs to be a function, would be awesome if it was possible to pass a python function to update a component!

5 posts - 3 participants

Read full topic