{
"info": {
"author": "Pawe\u0142 A. Pierzchlewicz",
"author_email": "paul@teacode.io",
"bugtrack_url": null,
"classifiers": [
"Development Status :: 3 - Alpha",
"Intended Audience :: Developers",
"License :: OSI Approved :: MIT License",
"Programming Language :: Python :: 3",
"Topic :: Software Development :: Build Tools"
],
"description": "# ColabComponent\nA React.js inspired Component for building a simple reactive UI in Google Colaboratory.\n\n### Why?\nSometimes there is some manual work that has to be done with your data. Instead of building a custom desktop app, why not do so in Colab?\n\nI built this component inspired by the react framework, which provides in my opinion the best tools for quick prototype-like development ideal for custom data exploring and data analysis tools.\n\n### How?\nThe `google.colab` package offers an interface to run python functions in the `output`. Combine that with the fact that python notebooks can render full on HTML and you can build UIs using python, HTML, css and javascript!\n\n## Install\nIn a cell run:\n\n```bash\n!pip3 install ColabComponent\n```\n\nAll the required dependencies are installed in the enviroment provided by google.\n\n## How to use?\nThe package utilises Object-Oriented inheritance and is based around the basic class `Component`.\n\n### Component API\n| property name | type | description | overridable |\n|---|---|---|---|\n| render | method | the basic method, where the ui and effects are defined | ☑ |\n| component_did_mount | method | a hook that is called, when the component is mounted | ☑ |\n| component_did_update | method | a hook that is called, when the component is updated | ☑ |\n| display | method | run to display the component | ☒ |\n| register_effect | method | registers a python function such that it can be used within the HTML code | ☒ |\n| state | dict | holds the info about the state of the component | ☒ |\n| set_state | method | the preferred way of updating the component state | ☒ |\n\n## Example\n```python\nfrom ColabComponent import Component\n\nclass Counter(Component):\n def __init__(self):\n super().__init__()\n self.state = {\n 'number': 1\n }\n\n self.use_add = self.register_effect('add', self.add)\n\n def render(self):\n return f'''\n