React #

To install aFP Design System inside your React project you can use this command to add the corresponding package.

npm install @afp-design-system/react

pnpm add @afp-design-system/react @afp-design-system/core

Usage #

Import the required component to the desired location in your application. app.tsx example:

import { AfpButton } from '@afp-design-system/react';

export function App() {
  function buttonClicked() {
    console.log('Button clicked');
  }

  return (
    <div>
      <AfpButton variant="primary" onAfpClick={() => buttonClicked()}>Click me!</AfpButton>
    </div>
  );
}

export default App;

Event Handling #

Similar to the event handling from the chapter Usage, you can use React's event binding to listen to specific events. In the example above, we can see that a button is created, where the custom function onAfpClick is bound to a user defined function onClick.

Use default icons #

Alternatively, you can use the setAssetPath function.

Important: Without this step, access to the default Icon library is not possible. The output must be directed to /icons.

The icons from the core library need to be made available in the assets by Angular, depending on the project structure and compiler settings, which can vary from project to project. Here's an example for a Nx setup in the project.json:

{
  ...
  "options": {
    "assets": [
      {
        "glob": "*",
        "input": "node_modules/@afp-design-system/core/dist/icons",
        "output": "assets/icons"
      }
    ]
  },
  ...
}