Enables loading react components in Dash applications directly from local project files, without any need for a separate build process.
Project description
dash-local-react-components
A small library that allows for loading react components in Dash applications directly from local project files, without any need for a separate build process.
Setting up
1. Install the dash-local-react-components
python package
pip install dash-local-react-components
2. Put .js
files containing your react.js components into a subdirectory of your project
my-project
├ main.py
└ public
├ common.js
└ my_component.js
3. Load your component
from dash import Dash
from dash_local_react_components import load_react_component
app = Dash()
# if the component is exported from the my_component.js module as a default export
MyComponent = load_react_component(app, 'public', 'my_component.js')
# if the component is exported from the my_component.js module as a named export
MyComponent = load_react_component(app, 'public', 'my_component.js', 'MyComponent')
4. Add your component to the layout of your application
app.layout = html.Div([
html.H1('My application'),
MyComponent(id='my-component', text='Hello world')
])
Writing Dash react components
Writing custom react.js components for Dash applications is similar to writing any other react.js components. Nevertheless, there are some differences that worth noting.
An example of a Dash react component may look as follows:
import React from 'react'
import { add } from './common.js';
export default function MyComponent(props) {
const { setProps, count } = props;
function onClick() {
setProps({ count: add(count, 1) });
}
return React.createElement('div', {}, [
React.createElement('div', {}, `count: ${count}`),
React.createElement('button', { onClick }, 'Increment')
]);
}
MyComponent.defaultProps = {
count: 0
};
First, let's address the elephant in the room. As the dash-local-react-components
package removes the need for any build steps from the development process, it does not support .jsx
files (which are not natively supported by web browsers). This means that one cannot use the native react notation like <div>my text</div>
, but rather has to fall back to a little bit more involving syntax: React.createElement('div', {}, 'my text')
(where the first statement gets compiled into the second during a regular build process). Functionally both expressions are identical, so one can still create fully fledged react components without using the .jsx format, it just requires some getting used to and is not as convenient.
Apart form syntactic differences (imposed not necessarily by the Dash framework, but rather by this library), there are also some behavioral changes. Namely, each component used within a layout of a Dash application is provided with a special setProps
property. It's a function that can be used to change values of other properties of the current component. It behaves similarly to the setState
function of class-based components, but instead of modifying the state, it modifies the properties. You can use this function to manage the parts of the state of the component that should be exposed to python callbacks of your Dash application.
Motivation
The goal of this library is to remove any additional configuration and build steps from the process of creating Dash applications with custom react.js components in order to shorten the development cycle of prototyping small visualizations.
It is not recommended (until you fully know what you are doing) to use this library in bigger scale projects. The dash-local-react-components
serves raw .js files in an un-minified and un-bundled way, which means that they require more resources in order to be download and executed.
But if you are working on a small project and don't want to worry about npms, gulps, webpacks and grunts at this stage - this library might be something for you. Just run your main.py
and enjoy your fully interactive application.
Future improvements
The most inconvenient part of this library is the fact that it does not support .jsx files. It's a limitation of the current implementation, not the general design, though. It would be possible to compile .jsx files into .js files on the fly, when first requested. I did some investigation into it, but did not find any fully-python-based jsx transpilers, so I did not follow through - therefore it is not supported in the current version. But it might be a good thing to revisit in the future.
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
Built Distribution
File details
Details for the file dash_local_react_components-1.4.0.tar.gz
.
File metadata
- Download URL: dash_local_react_components-1.4.0.tar.gz
- Upload date:
- Size: 8.4 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.1.1 CPython/3.12.3
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 80cbcbc0844d8ae7e702535cc6b1ffaef3a6ba1eaf5d843cadeff8214952b863 |
|
MD5 | 13e957e84c57236d1afd97dcdaaf1d3e |
|
BLAKE2b-256 | 6123bd22ebcb661020c7d5aedb67768817a936996370ff4e457c78721a2c1a45 |
File details
Details for the file dash_local_react_components-1.4.0-py3-none-any.whl
.
File metadata
- Download URL: dash_local_react_components-1.4.0-py3-none-any.whl
- Upload date:
- Size: 7.8 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.1.1 CPython/3.12.3
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | d46dcc8bb1ee53e4c1244bae940aa12e32edfb93577c38349aaf26dc9b8d3f46 |
|
MD5 | 4fe08f440f47e96041fe7d8fe6594dd4 |
|
BLAKE2b-256 | 95cfebe4d5a4173093b8ea502965560e6f45e71e964816a00a964ef319ae8576 |