dash-cool-components 0.0.4

Cool React components, wrapped for Plotly Dash

Dash Cool Components

Cool React components, wrapped for Plotly Dash

Table of contents

• Installation
• Quick Start

Installation

pip install dash-cool-components

Components

Datatime Picker

A date-time picker. Source React component.

import dash
import dash_html_components as html
import dash_cool_components

app = dash.Dash(__name__)

my_component = dash_cool_components.DateTimePicker(id='date_time_picker')
app.layout = html.Div(my_component)

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

Keyed File Browser

File and directory browser given a flat keyed list of objects. Source React component.

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_cool_components


external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

dir_dict = [
    {'key': 'dir1/my_image.jpeg', 'size': 2782874},
    {'key': 'dir2/other_image.tif', 'size': 499240007}
]

my_component = dash_cool_components.FileExplorer(
    id='file_explorer',
    value=dir_dict,
)
app.layout = html.Div(my_component, style={'width': '500px'})

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

Tag Input

A tag input component. Source React component.

import dash
import dash_html_components as html
import dash_cool_components

app = dash.Dash(__name__)

my_component = dash_cool_components.Keywords(id='tag_input')
app.layout = html.Div(my_component)

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