@paperless/react

A collection of Web, React & Angular components that conform to the Employes design system.

https://paperless.employes.nl

📦 Install

React

npm install @paperless/core @paperless/react

yarn add @paperless/core @paperless/react

Angular

npm install @paperless/core @paperless/angular

yarn add @paperless/core @paperless/angular

Web Components

npm install @paperless/core

yarn add @paperless/core

🚀 Usage

React

// setup
import { applyPolyfills, defineCustomElements } from '@paperless/core/loader';

applyPolyfills().then(() => defineCustomElements());

// usage
import { Button } from '@employes/paperless';

const App = () => <Button>Click me!</Button>;

Angular

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { applyPolyfills, defineCustomElements } from '@paperless/core/loader';

applyPolyfills()
    .then(() => defineCustomElements())
    .then(() => platformBrowserDynamic().bootstrapModule(AppModule))
    .catch((err) => console.error(err));

// App Module
import { PaperlessModule } from '@employes/paperless-ngx';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,

        // add this in your app module
        PaperlessModule.forRoot(),

        // add this in any module using paperless components
        PaperlessModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// Any component
@Component({
    selector: 'app-root',
    templateUrl: `
      <p-button>Click me!</p-button>
    `,
})
export class AppComponent {}

Web Components

Add the following code snippet in your project to start using the components

import { defineCustomElements } from '@paperless/core/loader';
defineCustomElements();

And in your html:

<p-button>Click me!</p-button>

⌨️ Typescript

The library is javascript based but types are supported with d.ts files. You should get the types automatically when installing @paperless/core.

🤝 Contributing

We welcome contributions to @paperless!

Read our contributing guide and help us build or improve our components.

📝 License

This project is offered under Apache License 2.0.