Skip to main content

Consuming Components

There are two ways a developer can consume a component in their project.

Install Components as Packages#

To simplify the dev-experience of consumers, all exported components are available to be installed as an npm package using any package manager.

Installing Component#

Component packages are installed using their package name. The package name usually correlates to the component ID.

In your component workspace click on the Use dropdown, select the Install tab to copy your component scope name and component ID. You can then choose between NPM or Yarn to install your component in to another Bit workspace or into a React application.

npm install @orgName/componentScopeName.componentID

Configure Scoped Registry#

To install components with npm or yarn you might need to configure @YourUserName as a scoped registry.

npm config set '@YourUserName:registry' https://node.bit.dev

Vendor Components#

Bit Components are self contained, and have all their past versions, code and configurations as part of them. This allows for a unique feature where a consuming project may vendor a component to their Bit Workspace and manage the component as if it was authored in their workspace.

This feature is only available for workspaces with Bit initialized.

Import Components#

Use the import command to vendor a component.

Import a single component
bit import learn-harmony.hooks/use-counter
Import many components with glob-pattern
bit import teambit.mdx/*

When importing components Bit will:

  • Place the component the workspace according to the defaultDirectory as defined in workspace.jsonc.
  • Add component to .bitmap.
  • Install component dependencies.

All imported components are visible on the local Dev Server (bit start).

Update Imported Components#

To get the latest versions of every imported component in our workspace run:

bit import
tip

Use bit import --help or bit import -h to get a list of available options for this command.

Eject Imported Components#

To turn a vendor component to a dependency use the eject command.

bit eject learn-harmony.hooks/use-counter
tip

Use bit eject --help or bit eject -h to get a list of available options for this command.

Use Components#

Regardless of the consumption method chosen, using the component in the project is just the same:

app.js
import { Button } from '@yourUserName/componentScopeName.componentID'
...
<Button>click Here</Button>

FAQ#

How to import component to a different path?#

In case you need to set a different path for a specific imported component, use the --path option with the bit import command.