BSd3v / test-component

Dash TypeScript Component Template

This repository contains a Cookiecutter template to create your own Dash components with TypeScript.

• New to Dash? Check out the official Dash Documentations
• Need help with your component? Create a post on the Dash Community Forum

Usage

To use this template:

1. Install the requirements:

   pip install cookiecutter

   NodeJS is also required, install nvm to get the appropriate node version.
2. Run cookiecutter on the template repo:

   cookiecutter gh:plotly/dash-typescript-component-template

3. Answer the questions about the project.
   • project_name: This is the "human-readable" name of your project. For example, "Dash Core Components".
   • project_shortname: is derived from the project name, it is the name of the "Python library" for your project. By default, this is generated from your project_name by lowercasing the name and replacing spaces & - with underscores. For example, for "Dash Core Components" this would be "dash_core_components".
   • component_name: This is the name of the initial component that is generated. As a JavaScript class name it should be in PascalCase. defaults to the PascalCase version of project_shortname.
   • jl_prefix: Optional prefix for Julia components. For example, dash_core_components uses "dcc" so the Python dcc.Input becomes dccInput in Julia, and dash_table uses "dash" to make dashDataTable.
   • r_prefix: Optional prefix for R components. For example, dash_core_components uses "dcc" so the Python dcc.Input becomes dccInput in R, and dash_table uses "dash" to make dashDataTable.
   • author_name and author_email: for package.json and DESCRIPTION (for R) metadata.
   • github_org: If you plan to push this to GitHub, enter the organization or username that will own it (for URLs to the project homepage and bug report page)
   • description: the project description, included in package.json.
   • license: License type for the component library. Plotly recommends the MIT license, but you should read the generated LICENSE file carefully to make sure this is right for you.
   • publish_on_npm: Set to false to only serve locally from the package data.
4. The project will be generated in a folder named with your project_shortname.
5. Follow the directions in the generated README to start developing your new Dash component.

More Resources

• To get a feel for what's involved in creating a component, read the README.md generated by this cookiecutter
• This template was adapted from the original component template
• Examples of Dash component libraries include:
  • dash-core-components
  • dash-html-components
  • dash-cytoscape
  • dash-deck
  • Curated community-made components