All help articles

How to import a component from NPM

Laska currently offers a limited amount of components that you can use out of the box. You'll find these on the left-hand side from the Add component pane.

It's likely however that you would like to use other components that live on NPM. By creating a special configuration file in your project, you can populate the Components section with your own collection of NPM components.


In this article, we'll walk you through adding the button from the react-awesome-button package.

We'd like the Awesome Button to show up in the Add component panel. To do so, first create a new file called .laska.config.yaml  with the following contents:

additionalComponents:
  - name: My own components
    type: folder
    children:
    - name: AwesomeButton
      isSubImport: true
      depPackage: react-awesome-button
      icon: fas fa-laugh
      controls:
        - key: childrenString
          label_en: Button text
          useRawValue: true
          storageType: prop
          controlType: string
        - key: type
          storageType: prop
          controlType: string

The additionalComponents field is an array that can take a nested structure of components. Each component is defined using attributes such as name, isSubImport, depPackage and so on.

If we now go back to the Add component pane, we'll notice the button shows up. We can now start using it in our project.