![]() We’ve already written the PropType declarations once in the component itself, so is there a way to utilise them to automate the generation of the PropType table? - Spoiler alert, there is. However, this doesn’t feel very future proof or DRY, especially if you’re going to be adding multiple components to your visual component library. Now we have an application which shows us our Badge component, and what props this component takes. Great, we now have a component with a PropType table underneath! This will be the component that we want to view in our application, with our dynamic PropType table. The componentįirst start by creating a new file called src/components/Badge.js. ![]() It’ll have the simple Create React App application running on it. This will give us a simple server currently running on localhost:3000. In your terminal, run the following commands to create the application: $ npm install -g create-react-app // if you've not got it already $ cd ~/Sites // or wherever you keep your projects $ create-react-app prop-types-with-table // installer will run $ cd prop-types-with-table $ yarn start If you’ve not checked it out before, I would highly recommend it. The source code is available on Github for this, feel free to fork it and explore the code.īut if you want to follow a step-by-step guide on how to do this, let’s begin! Getting set upįor the purposes of this, I’m starting with a create-react-app application, it’s just the simplest way to get quick React applications up and running. Creating a rule for a component in a Javascript file, and then having to manually type it out in documentation felt like an area that could be streamlined.īecause we use React, we came up with an idea to use the native PropType declarations on each component to automatically power a table of data, namely each of the props that a component takes, what type of prop it is, and whether it is required or not. When we created our Design System, we wanted to write as little repetitive documentation as possible. This is useful when developing these components because we immediately know if the props that are being consumed by the component are of the correct type, therefore making things easier to debug when prop types get misaligned.īut using these PropType also allows us to document the component, in a visual component library or design system, for example. When we write React components, we use the prop-types module to do basic type checking against the props that the component is expected to receive. This is the first in a series of guides showing the methodologies behind the Wonderbly Design System.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |