3.5.1-20240929-093148 • Published 8 months ago

@scm-manager/ui-extensions v3.5.1-20240929-093148

Weekly downloads
12,940
License
AGPL-3.0-only
Repository
-
Last release
8 months ago

ui-extensions

UI-Extensions contains the building blocks for the SCM-Manager ui extension system.

Extensions and ExtensionPoints

Extension points are spots in the ui, where the ui could be extended or modified. An extension point requires a unique name and is represented as React component.

Example:

<div>
  <h2>Repository</h2>
  <ExtensionPoint name="repo.details" />
</div>

We can register an extension, in the form of a React component, to the "repo.details" extension point, by using the binder:

import { binder } from "@scm-manager/ui-extensions";

const Rtfm = () => {
  return <strong>Read the f*** manual</strong>;
};

binder.bind("repo.details", Rtfm);

The ExtensionPoint will now find and render the Rtfm component.

Render multiple extensions

An extension point can render multiple extensions at one. This can be done with the renderAll parameter:

<div>
  <h2>Repository</h2>
  <ExtensionPoint name="repo.details" renderAll={true} />
</div>

Now we can bind multiple components to the same extension point.

const Rtfm = () => {
  return <strong>Read the f*** manual</strong>;
};

const RealyRtfm = () => {
  return <h1>Read the f*** manual</h1>;
};

binder.bind("repo.details", Rtfm);
binder.bind("repo.details", RealyRtfm);

Passing props to extensions

An extension point author can pass React properties to the extensions. This can be done with the props property:

<div>
  <ExtensionPoint name="repo.title" props={{name: "myrepo"}} />
</div>

The extension becomes now the defined react properties as input:

const Title = (props) => {
  return <h1>Repository {props.name}</h1>;
};

binder.bind("repo.title", Title);

Defaults

An ExtensionPoint is able to render a default, if no extension is bound to the ExtensionPoint. The default can be passed as React children:

<ExtensionPoint name="repo.title">
  <h1>Default Title</h1>
</ExtensionPoint>

Conditional rendering

An extension can specify a predicate function to the binder. This function becomes the props of the ExtensionPoint as input and only if the predicate returns true the extension will be rendered:

const GitAvatar = () => {
  return <img src="/git/avatar.png" alt="git avatar" />;
};

binder.bind("repo.avatar", GitAvatar, (props) => props.type === "git");
<ExtensionPoint name="repo.avatar" props={type: "git"} />
3.5.0

9 months ago

3.4.2

10 months ago

3.4.1

10 months ago

3.3.0

1 year ago

2.46.4

1 year ago

2.46.3

1 year ago

3.2.2

1 year ago

3.2.1

1 year ago

3.2.0

1 year ago

3.4.0

11 months ago

3.1.0

1 year ago

3.0.4

1 year ago

2.46.2

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

2.48.2

2 years ago

2.48.3

2 years ago

2.45.0

2 years ago

2.45.2

2 years ago

2.45.1

2 years ago

2.48.0

2 years ago

2.48.1

2 years ago

2.46.1

2 years ago

2.46.0

2 years ago

2.44.3

2 years ago

2.47.0

2 years ago

2.43.1

2 years ago

2.44.1

2 years ago

2.44.0

2 years ago

2.44.2

2 years ago

2.43.0

2 years ago

2.42.3

2 years ago

2.42.2

2 years ago

2.41.1

2 years ago

2.42.1

2 years ago

2.42.0

2 years ago

2.41.0

2 years ago

2.40.1

3 years ago

2.39.1

3 years ago

2.40.0

3 years ago

2.39.0

3 years ago

2.37.2

3 years ago

2.37.1

3 years ago

2.37.0

3 years ago

2.38.1

3 years ago

2.38.0

3 years ago

2.36.0

3 years ago

2.36.1

3 years ago

2.34.0

3 years ago

2.35.0

3 years ago

2.33.0

3 years ago

2.32.2

3 years ago

2.32.0

3 years ago

2.32.1

3 years ago

2.30.1

3 years ago

2.30.0

3 years ago

2.20.1

3 years ago

2.31.1

3 years ago

2.31.0

3 years ago

2.29.0

3 years ago

2.29.1

3 years ago

2.28.0

4 years ago

2.26.1

4 years ago

2.27.2

4 years ago

2.27.1

4 years ago

2.27.4

4 years ago

2.27.3

4 years ago

2.27.0

4 years ago

2.26.0

4 years ago

2.25.0

4 years ago

2.24.0

4 years ago

2.23.0

4 years ago

2.22.0

4 years ago

2.21.0

4 years ago

2.20.0

4 years ago

2.19.1

4 years ago

2.19.0

4 years ago

2.18.0

4 years ago

2.17.1

4 years ago

2.17.0

4 years ago

2.16.0

4 years ago

2.15.1

4 years ago

2.15.0

4 years ago

2.14.1

4 years ago

2.14.0

4 years ago

2.13.0

4 years ago

2.12.0

5 years ago

2.11.1

5 years ago

2.11.0

5 years ago

2.10.1

5 years ago

2.10.0

5 years ago

2.9.1

5 years ago

2.9.0

5 years ago

2.8.0

5 years ago

2.6.3

5 years ago

2.7.1

5 years ago

2.7.0

5 years ago

2.6.2

5 years ago

2.6.1

5 years ago

2.6.0

5 years ago

2.5.0

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

2.0.0-rc8

5 years ago

2.0.0-rc7

5 years ago

2.0.0-rc6

5 years ago

2.0.0-rc5

5 years ago

2.0.0-rc4

5 years ago

2.0.0-rc3

5 years ago

2.0.0-rc2

5 years ago

2.0.0-rc1

6 years ago

0.1.2

6 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.1

7 years ago