@rocket.chat/fuselage

> Rocket.Chat's React Components Library

---

  !react version  !npm downloads !License: MIT

!deps !npm bundle size

Install

Firstly, install the peer dependencies (prerequisites):

``sh
npm i @rocket.chat/fuselage-hooks @rocket.chat/icons react react-dom react-virtuoso

or, if you are using yarn:

yarn add @rocket.chat/fuselage-hooks @rocket.chat/icons react react-dom react-virtuoso
`

Add @rocket.chat/fuselage as a dependency:

`sh
npm i @rocket.chat/fuselage

or, if you are using yarn:

yarn add @rocket.chat/fuselage
`

Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues.

$3

As this package dependends on others in this monorepo, before anything run the following at the root directory:

`sh
yarn build
`

$3

To ensure the source is matching our coding style, we perform linting>).
Before commiting, check if your code fits our style by running:

`sh
yarn lint
`

Some linter warnings and errors can be automatically fixed:

`sh
yarn lint-and-fix
`

$3

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

`sh
yarn test
`

$3

We develop and describe our visual components in the form of stories, manage by a tool called Storybook.
To start developing with Storybook, run:

`sh
yarn storybook
`

$3

To use the fuselage, you need to import the css first:

`tsx
import '@rocket.chat/fuselage/dist/fuselage.css';

const MyButton = () => {
return Fuselage Button
};
`

Note: If you are using Next.js for development and wish to use Rocket.Chat Fuselage components, you need to dynamically import the component. More on this can be found here.

Usage Example:

`javascript
import dynamic from 'next/dynamic';

export const TextInput = dynamic(
() => import('@rocket.chat/fuselage').then((module) => module.TextInput),
{ ssr: false },
);
``