Codux Help Center
Browse our articles to find the answers you need
Using the Component Properties Documentation
Knowing how to use the components you've built for your apps is important, and the best way to know how is by documenting them! Codux automates most of the work associated with creating the documentation for your components' complex prop types so that the documentation is available alongside the components as they're developed.
Whether you're a designer or a developer, you can read and contribute to the documentation of your component's properties API right from within Codux.
How It Works
Codux creates tables for the props, complete with their names and types with no effort needed on your part – it is all done automatically. The Name column contains the names of each of your component's properties, and the Type column contains the type of value that it expects (for example, a string for product names and IDs, and a number for a product price).
Codux looks for JSDocs comments (a markup language for JavaScript) in your project's source code. If you include JSDocs comments in your code appropriately, Codux will use include them in the documentation.
Viewing the API Documentation
To view your documentation, select the component from the Elements panel on the left, and then hover over the export interface beneath the component property in the Properties panel.
There you will see the documentation for the selected component, and when you click on the interface, you'll see the documentation open in a new tab (as shown in the overview).
Adding Component and Prop Descriptions
Component descriptions appear beneath the component name in the API documentation to describe the component (i.e., "All details as printed on the credit card."). To include a component description, enter it as a JSDoc comment above the component definition in the project's code.
To include a description for each of your component's props, leave a comment above the prop variable where it was first initialized (also following JSDocs convention).
Here is a complete example of a component with JSDocs comments:
1 2 3 4 5 6 7 8 9 10 11
/** All details as printed on the credit card. */ export interface CardInformation { /** Name of cardholder */ cardHolder: string; /** Credit card expiration date */ expiryDate: string; /** Name of company issuing card */ company: string; /** Is a premium card? */ premium?: boolean; }
The component documentation based on the code sample above looks like this:
Was this article helpful?