Skip to main content

Cool React components, wrapped for Plotly Dash

Project description

Dash Cool Components

Cool React components, wrapped for Plotly Dash

PyPI version

Table of contents

Installation

pip install dash-cool-components

Components

Datetime Picker

A date-time-timezone picker input. Implemented with the React Datepicker and Timezone Picker React components.

Component Properties:

The ID used to identify this component in Dash callbacks.

  • id: string

The input's current value, on ISO format with date, time and timezone.

  • value: string

Defines if the timezone input should be rendered. Defaults to true.

  • renderTimezone: boolean

The date input placeholder.

  • placeholder: string

The timezone input placeholder.

  • timezonePlaceholder: string

The component container's style. Can be a style object or a css string.

  • style: object | string

The date input's style. Can be a style object or a css string.

  • dateInputStyle: object | string

The timezone container's style. Must be a style object.

  • timezoneInputStyle: object
import dash
import dash_html_components as html
import dash_cool_components

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_cool_components.DateTimePicker(
            id='timezone',
            renderTimezone=True,
        ), width={'size':4}
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('input', 'value')])
def display_output(value):
    if value is not None:
        output_div = html.Div([
            html.H4('Datetime: {}'.format(value['datetime'])),
            html.H4('Timezone: {}'.format(value['timezone']))
        ])
        return output_div

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

Keyed File Browser

File and directory browser given a flat keyed list of objects. Implemented with React Keyed File Browser.

Component Properties

The ID used to identify this component in Dash callbacks.

  • id: string

The current selected path in the file tree.

  • selectedPath: string

The file tree to be displayed in the browser. Each entry in the array must be an object with the key property, which specifies it's location in the tree. Otherproperties are modified and size. To be able to receive the path selection feedback, you must enter keys for both files and folders.

  • files: array

Example File

Tag Input

A tag input component. Implemented with React Tag Input.

Components Properties

The ID used to identify this component in Dash callbacks.

  • id: string

The component wrapper's style. Can be either a style object or a CSS string.

  • wrapperStyle: object

The tag's style. Can be either a style object or a CSS string.

  • tagStyle: object

The text input's style. Can be either a style object or a CSS string.

  • inputStyle: object

The tag delete button's style. Can be either a style object or a CSS string.

  • tagDeleteStyle: object

Placeholder for the text input.

  • placeholder: string

The input's current tags.

  • value: array

Tags to be inserted on the input. The input's atual tags are replaced.

  • injectedTags: array

Example File

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_cool_components-0.1.1.tar.gz (870.9 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page