mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-18 20:41:53 +03:00
79 lines
3.4 KiB
Markdown
79 lines
3.4 KiB
Markdown
# Customisations
|
|
|
|
### 🦖 DEPRECATED
|
|
|
|
Customisations have been deprecated in favour of the [Module API](https://github.com/element-hq/element-web/blob/develop/docs/modules.md).
|
|
If you have use cases from customisations which are not yet available via the Module API please open an issue.
|
|
Customisations will be removed from the codebase in a future release.
|
|
|
|
---
|
|
|
|
Element Web and the React SDK support "customisation points" that can be used to
|
|
easily add custom logic specific to a particular deployment of Element Web.
|
|
|
|
An example of this is the [media customisations
|
|
module](https://github.com/element-hq/element-web/blob/develop/src/customisations/Media.ts).
|
|
This module in the React SDK only defines some empty functions and their types:
|
|
it does not do anything by default.
|
|
|
|
To make use of these customisation points, you will first need to fork Element
|
|
Web so that you can add your own code. Even though the default module is part of
|
|
the React SDK, you can still override it from the Element Web layer:
|
|
|
|
1. Copy the default customisation module to
|
|
`element-web/src/customisations/YourNameMedia.ts`
|
|
2. Edit customisations points and make sure export the ones you actually want to
|
|
activate
|
|
3. Create/add an entry to `customisations.json` next to the webpack config:
|
|
|
|
```json
|
|
{
|
|
"src/customisations/Media.ts": "src/customisations/YourNameMedia.ts"
|
|
}
|
|
```
|
|
|
|
By isolating customisations to their own module, this approach should remove the
|
|
chance of merge conflicts when updating your fork, and thus simplify ongoing
|
|
maintenance.
|
|
|
|
**Note**: The project deliberately does not exclude `customisations.json` from Git.
|
|
This is to ensure that in shared projects it's possible to have a common config. By
|
|
default, Element Web does _not_ ship with this file to prevent conflicts.
|
|
|
|
### Custom components
|
|
|
|
Maintainers can use the above system to override components if they wish. Maintenance and API surface compatibility are
|
|
left as a responsibility for the project - the layering in Element Web (including the react-sdk) do not make guarantees
|
|
that properties/state machines won't change.
|
|
|
|
### Component visibility customisation
|
|
|
|
UI for some actions can be hidden via the ComponentVisibility customisation:
|
|
|
|
- inviting users to rooms and spaces,
|
|
- creating rooms,
|
|
- creating spaces,
|
|
|
|
To customise visibility create a customisation module from [ComponentVisibility](https://github.com/element-hq/element-web/blob/master/src/customisations/ComponentVisibility.ts) following the instructions above.
|
|
|
|
`shouldShowComponent` determines whether the active MatrixClient user should be able to use
|
|
the given UI component. When `shouldShowComponent` returns falsy all UI components for that feature will be hidden.
|
|
If shown, the user might still not be able to use the
|
|
component depending on their contextual permissions. For example, invite options
|
|
might be shown to the user, but they won't have permission to invite users to
|
|
the current room: the button will appear disabled.
|
|
|
|
For example, to only allow users who meet a certain condition to create spaces:
|
|
|
|
```typescript
|
|
function shouldShowComponent(component: UIComponent): boolean {
|
|
if (component === UIComponent.CreateSpaces) {
|
|
// customConditionCheck() is a function of your own creation
|
|
const userMeetsCondition = customConditionCheck(MatrixClientPeg.get().getUserId());
|
|
return userMeetsCondition;
|
|
}
|
|
return true;
|
|
}
|
|
```
|
|
|
|
In this example, all UI related to creating a space will be hidden unless the users meets the custom condition.
|