Replugged Developer Guide

https://guide.replugged.dev
Admin
A comprehensive guide for developers looking to create plugins and themes for the Replugged...
Tokens:42,131
Snippets:222
Trust Score:6.9
Update:10 months ago
Show doc for...
Tokens:
Raw
### Using the Notice Component (JavaScript)

Source: https://guide.replugged.dev/docs/plugins/modules/components/Notice

This snippet demonstrates how to import and use the Notice component from Replugged. It shows a basic example of displaying a positive notice with custom text. Ensure the 'replugged' library is installed and imported correctly.

```javascript
import { components } from "replugged";
const { Notice } = components;

<Notice messageType={Notice.Types.POSITIVE}>Notice text</Notice>;
```

--------------------------------

### Modal Service Usage

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

This section provides an example of how to use the modal service to open a modal with custom header, content, and footer.

```APIDOC
## Modal Service Usage

### Description
Demonstrates how to open a modal using the `modal.openModal` function from the `common` module. The modal can be customized with various components for its header, content, and footer.

### Method
`modal.openModal(children, options)`

### Endpoint
N/A (Client-side JavaScript API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`children` (ReactNode) - The content to be displayed inside the modal.
`options` (object) - Optional configuration for the modal.
  - `props` (object) - Props to be passed to the `Modal.ModalRoot` component.

### Request Example
```javascript
import { common, components } from "replugged";
const { modal } = common;
const { Modal } = components;

modal.openModal((props) => (
  <Modal.ModalRoot {...props}>
    <Modal.ModalHeader>{/* Your components for the header here */}</Modal.ModalHeader>
    <Modal.ModalContent>{/* Your components here */}</Modal.ModalContent>
    <Modal.ModalFooter>{/* Your components for the footer here */}</Modal.ModalFooter>
  </Modal.ModalRoot>
));
```

### Response
#### Success Response (N/A)
This is a client-side function call and does not have a typical HTTP success response.

#### Response Example
None
```

--------------------------------

### GitHub README Install Button for Replugged

Source: https://guide.replugged.dev/docs/plugins/getting-started

This markdown snippet generates a button that, when clicked, installs a Replugged plugin. It uses a shield.io badge and links to the Replugged installation URL. Ensure the 'identifier' and 'source' parameters in the URL are correctly set for your plugin.

```markdown
[![Install in Replugged](https://img.shields.io/badge/-Install%20in%20Replugged-blue?style=for-the-badge&logo=none)](https://replugged.dev/install?identifier=YOUR_ADDON_INFO_HERE&source=github)
```

--------------------------------

### Generate Replugged Installation Link

Source: https://guide.replugged.dev/docs/themes/getting-started

This is a URL format used to automatically open Replugged and prompt users to install a theme. The link accepts parameters such as 'identifier', 'source', and 'id' to specify the addon and its source.

```URL
https://replugged.dev/install?identifier=replugged-org/theme-template&source=github
```

--------------------------------

### Manage Plugin Injections with start and stop

Source: https://guide.replugged.dev/docs/plugins/injecting

Properly manage Replugged module injections within a plugin's lifecycle. Injections should be added in the `start` function and all should be removed using `injector.uninjectAll()` in the `stop` function to prevent memory leaks and unexpected behavior.

```typescript
import { Injector } from "replugged";

const injector = new Injector();

export function start() {
  // do your injections here
}

export function stop() {
  injector.uninjectAll();
}
```

--------------------------------

### Customizing `useSetting` Hook Props - JavaScript

Source: https://guide.replugged.dev/docs/plugins/settings

Demonstrates how to get the `value` and `onChange` handlers from the `useSetting` hook and apply them manually to a component. This allows for custom logic, such as logging, before updating the setting.

```javascript
import { components, settings, util } from "replugged";
const { TextInput } = components;

const cfg = await settings.init("YOUR_PLUGIN_ID");

export function Settings(): React.ReactElement {
  const { value, onChange } = util.useSetting(cfg, "foo", "bar");
  return (
    <TextInput 
      value={value}
      onChange={(value) => {
        console.log(value);
        onChange(value);
      }}
    />
  );
}
```

--------------------------------

### Get All Users

Source: https://guide.replugged.dev/docs/plugins/modules/common/stores/users

Retrieves a record of all available users.

```APIDOC
## GET /api/users/all

### Description
Gets all users.

### Method
GET

### Endpoint
/api/users/all

### Response
#### Success Response (200)
- **usersMap** (Record<string, User>) - A map where keys are user IDs and values are User objects.

#### Response Example
```json
{
  "1234567890": {
    "id": "1234567890",
    "username": "exampleUser",
    "discriminator": "0001"
  }
}
```
```

--------------------------------

### Get User Store Version

Source: https://guide.replugged.dev/docs/plugins/modules/common/stores/users

Retrieves the version number for the user store.

```APIDOC
## GET /api/users/version

### Description
Gets the user store version.

### Method
GET

### Endpoint
/api/users/version

### Response
#### Success Response (200)
- **version** (number) - The current version of the user store.

#### Response Example
```json
{
  "version": 3
}
```
```

--------------------------------

### Wait for a Webpack Module to be Available

Source: https://guide.replugged.dev/docs/plugins/modules

This example shows how to use `waitForModule` to asynchronously retrieve a module. It waits until the module is loaded before proceeding, which is crucial for modules that might not be immediately available during Discord startup. It utilizes a filter based on the module's source code.

```javascript
import { webpack } from "replugged";
const { filters, waitForModule } = webpack;

export async function start() {
  const typingMod = await waitForModule(filters.bySource("HORIZONTAL_REVERSE:"));
}
```

--------------------------------

### Test Plaintext Patch in VSCode

Source: https://guide.replugged.dev/docs/plugins/devtools

Example of a plaintext patch structure required for the Replugged Development Companion Extension. The patch must include a 'find' property for the extension to parse and test it. This allows developers to test module finds and plaintext patches without client reloads.

```javascript
export default [
  {
    find: "SOMETHING",
    replacements: [{}],
  },
];

```

--------------------------------

### Get All Guilds and Members

Source: https://guide.replugged.dev/docs/plugins/modules/common/stores/users

Retrieves a mapping of all guilds and their fetched members.

```APIDOC
## GET /api/guilds/members/all/mutable

### Description
Gets all guilds and their fetched members.

### Method
GET

### Endpoint
/api/guilds/members/all/mutable

### Response
#### Success Response (200)
- **guildMembersMap** (Record<string, Record<string, GuildMember>>) - A nested map where the outer key is guild ID and the inner key is user ID, mapping to GuildMember objects.

#### Response Example
```json
{
  "guild123": {
    "user456": {
      "user": {
        "id": "user456",
        "username": "memberUser",
        "discriminator": "0002"
      },
      "roles": ["roleA"]
    }
  }
}
```
```

--------------------------------

### Modal.ModalContent

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Documentation for the Modal.ModalContent subcomponent, detailing its available props.

```APIDOC
## Modal.ModalContent

### Description
Contains the content of the modal. This component extends the attributes of a `div` element.

### Method
Component

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
<Modal.ModalContent>Your modal content here</Modal.ModalContent>
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
None

### Props
- **scrollbarType** ("auto" | "none" | "thin") - Optional - Defaults to `thin`. Defines the scrollbar type.
- **scrollerRef** (Ref<unknown>) - Optional - A ref for the scroller element.
```

--------------------------------

### Modal.ModalHeader

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Documentation for the Modal.ModalHeader subcomponent, detailing its available props.

```APIDOC
## Modal.ModalHeader

### Description
Contains the header elements of the modal.

### Method
Component

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
<Modal.ModalHeader>
  <h2>Modal Title</h2>
</Modal.ModalHeader>
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
None

### Props
- **align** (Flex.Align) - Optional - Defaults to `Flex.Align.CENTER`. Flexbox align property.
- **className** (string) - Optional - Component class name.
- **direction** (Flex.Direction) - Optional - Defaults to `Flex.Direction.HORIZONTAL`. Flexbox direction property.
- **justify** (Flex.Justify) - Optional - Defaults to `Flex.Justify.START`. Flexbox justify property.
- **separator** (boolean) - Optional - Defaults to `false`. Whether a divider is shown between the header and the modal content.
- **wrap** (Flex.Wrap) - Optional - Defaults to `Flex.Wrap.NO_WRAP`. Flexbox wrap property.
```

--------------------------------

### Modal.ModalFooter

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Documentation for the Modal.ModalFooter subcomponent, detailing its available props.

```APIDOC
## Modal.ModalFooter

### Description
Contains the footer elements of the modal.

### Method
Component

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
<Modal.ModalFooter>
  {/* Footer actions here */}
</Modal.ModalFooter>
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
None

### Props
- **align** (Flex.Align) - Optional - Defaults to `Flex.Align.STRETCH`. Flexbox align property.
- **className** (string) - Optional - Component class name.
- **direction** (Flex.Direction) - Optional - Defaults to `Flex.Direction.HORIZONTAL_REVERSE`. Flexbox direction property.
- **justify** (Flex.Justify) - Optional - Defaults to `Flex.Justify.START`. Flexbox justify property.
- **wrap** (Flex.Wrap) - Optional - Defaults to `Flex.Wrap.NO_WRAP`. Flexbox wrap property.
```

--------------------------------

### Modal.ModalCloseButton

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Documentation for the Modal.ModalCloseButton subcomponent, detailing its available props.

```APIDOC
## Modal.ModalCloseButton

### Description
Represents a close button component for the modal.

### Method
Component

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
<Modal.ModalCloseButton />
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
None

### Props
- **className** (string) - Optional - Component class name.
- **focusProps** (Record<string, unknown>) - Optional - Props for the FocusRing component.
- **hideOnFullscreen** (boolean) - Optional - Defaults to `false`. Whether the button is hidden when modal is in fullscreen.
- **onClick** (* (): void) - Optional - Function ran when clicking the close button.
- **withCircleBackground** (boolean) - Optional - Defaults to `false`. Whether the button is in a circle.
```

--------------------------------

### Get a Webpack Module by Store Name

Source: https://guide.replugged.dev/docs/plugins/modules

This example shows how to retrieve a Flux store by its name using the `getByStoreName` function. It's a straightforward method for accessing state management modules within Replugged.

```javascript
import { webpack } from "replugged";
const { getByStoreName } = webpack;

export function start() {
  const store = getByStoreName("ChannelStore");
}
```

--------------------------------

### Example ContextMenu Usage in React

Source: https://guide.replugged.dev/docs/plugins/modules/components/ContextMenu

Demonstrates how to import and use the ContextMenu component with a Button in a React application. It shows how to open a custom context menu on right-click and includes basic menu item configurations. Requires the 'replugged' modules 'common' and 'components'.

```javascript
import { common, components } from "replugged";
const { contextMenu } = common;
const { Button, ContextMenu: Menu } = components;

const ExampleContext = (): React.ReactElement => (
  <Menu.ContextMenu navId="example-context" onClose={contextMenu.close}>
    <Menu.MenuGroup>{/* Your Menu components here */}</Menu.MenuGroup>
    <Menu.MenuItem id="example-item" label="Menu Item" action={() => console.log("Pressed!")} />
    <Menu.MenuItem id="example-submenu" label="Menu Item">
      {/* Add Menu components here to create a submenu */}
    </Menu.MenuItem>
    <Menu.MenuSeparator />
  </Menu.ContextMenu>
);

<Button onContextMenu={(event) => contextMenu.open(event, () => <ExampleContext />)}>
  Right-click me
</Button>;
```

--------------------------------

### Set Setting Value - JavaScript

Source: https://guide.replugged.dev/docs/plugins/settings

Sets or updates the value of a specific setting in the settings manager. This change is persisted and can be retrieved later using the `get` method.

```javascript
cfg.set("foo", "world");
```

--------------------------------

### Import Common Modules from Replugged

Source: https://guide.replugged.dev/docs/plugins/modules/common

Demonstrates the correct way to import common modules provided by Replugged. Always import from 'replugged' and destructure the desired module. Importing directly from 'replugged/dist/whatever' is not supported.

```javascript
import { common } from "replugged";  
```

--------------------------------

### Wait for a Webpack Module by its Properties

Source: https://guide.replugged.dev/docs/plugins/modules

This example demonstrates the `waitForProps` function, which combines the functionality of `getByProps` with the waiting mechanism of `waitForModule`. It asynchronously fetches a module that has all the specified properties.

```javascript
import { webpack } from "replugged";
const { waitForProps } = webpack;

export function start() {
  const typingModule = await waitForProps("getChannelId", "addChangeListener");
}
```

--------------------------------

### Using Replugged Text Component

Source: https://guide.replugged.dev/docs/plugins/modules/components/Text

Demonstrates basic usage of the Replugged Text component to render styled text. This requires the 'replugged' library to be installed and imported.

```javascript
import { components } from "replugged";
const { Text } = components;

<Text.Normal>This is an example</Text.Normal>;
```

--------------------------------

### ContextMenu Props and Options Types

Source: https://guide.replugged.dev/docs/plugins/modules/common/utilities/contextMenu

Defines the structure and available options for configuring context menus.

```APIDOC
## ContextMenu Props and Options Types

### Description
Defines the types used for configuring and displaying context menus, including properties and options.

### Types

#### `ContextMenuProps`

- **Description**: Properties for the `ContextMenu` component.
- **Fields**:
  - `className` (string) - Optional - Component class name.
  - `config` (ContextMenusOptions) - Optional - Options used for that context menu.
  - `context` (string) - Optional - App context. Defaults to `APP`.
  - `onHeightUpdate` (() => void) - Optional - Function to run when the height is updated.
  - `position` (Tooltip.Positions) - Optional - Context menu position.
  - `target` (HTMLElement) - Optional - The element that the context menu is attached to.
  - `theme` (string) - Optional - Current theme.

#### `ContextMenusOptions`

- **Description**: Options for configuring a context menu.
- **Fields**:
  - `align` (Tooltip.Aligns) - Optional - Alignment of the context menu relative to its children, works with `position`.
  - `enableSpellCheck` (boolean) - Optional - Whether to enable spell checking. Defaults to `false`.
  - `impressionName` (string) - Optional - Name for analytics impressions.
  - `impressionProperties` (ImpressionProperties) - Optional - Properties for analytics impressions.
  - `onClose` (() => void) - Optional - Function to run when the context menu is closed.
  - `position` (Tooltip.Positions) - Optional - Position of the context menu, works with `align`.
```

--------------------------------

### Get All Setting Values - JavaScript

Source: https://guide.replugged.dev/docs/plugins/settings

Retrieves all currently set values from the settings manager. This method returns an object containing all key-value pairs that have been explicitly set, excluding any default values.

```javascript
const values = cfg.all();
```

--------------------------------

### Basic Button Item Usage

Source: https://guide.replugged.dev/docs/plugins/modules/components/Button

Demonstrates the basic implementation of the ButtonItem component. It shows how to import the component, define its text, and attach an onClick event handler. This is the fundamental way to render a button in the application.

```javascript
import { components } from "replugged";
const { ButtonItem } = components;

<ButtonItem button="Button text" onClick={() => console.log("Pressed!")}>
  Title
</ButtonItem>;
```

--------------------------------

### TextInput Component Documentation

Source: https://guide.replugged.dev/docs/plugins/modules/components/TextInput

Documentation for the TextInput component, detailing its properties and usage.

```APIDOC
## TextInput Component

### Description

The TextInput component is used to create input fields within the application. It extends the standard HTML input element attributes and provides additional customization options.

### Props

#### Props of `TextInput` (extends `input` element attributes):

- **editable** (boolean) - Optional - Defaults to `true`. Whether the input is editable.
- **error** (string) - Optional - Error message displayed if length exceeds limits.
- **focusProps** (Record<string, unknown>) - Optional - Props for the FocusRing component.
- **inputClassName** (string) - Optional - Input element class name.
- **inputPrefix** (string) - Optional - Text prefix.
- **inputRef** (Ref<HTMLInputElement>) - Optional - Input ref.
- **onChange** ((value: string) => void) - Optional - Function ran on value change.
- **prefixElement** (ReactNode) - Optional - Element for the prefix.
- **size** (`TextInput.Sizes`) - Optional - Defaults to `TextInput.Sizes.DEFAULT`. Define the input size.

### Enums

#### `TextInput.Sizes`

- **DEFAULT**
- **MINI**

### Usage Example

```javascript
import { components } from "replugged";
const { FormItem, TextInput } = components;

export function Settings(): React.ReactElement {
  return (
    <FormItem title="Foo">
      <TextInput {...util.useSetting(cfg, "foo", "bar")} />
    </FormItem>
  );
}
```
```

--------------------------------

### Get Setting Value - JavaScript

Source: https://guide.replugged.dev/docs/plugins/settings

Retrieves a specific setting's value from the settings manager. It can optionally accept a fallback value that is returned if the setting does not exist, ensuring a value is always provided.

```javascript
const foo = cfg.get("foo");
const bar = cfg.get("bar", 5);
```

--------------------------------

### Get All Matching Webpack Modules by Props in JavaScript

Source: https://guide.replugged.dev/docs/plugins/modules

Retrieves all webpack modules that match the specified properties, rather than just the first one found. This is controlled by the `all: true` option and is useful when multiple modules share the same properties.

```javascript
getByProps(["getChannelId", "addChangeListener"], { all: true });
```

--------------------------------

### Modal.ModalRoot

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Documentation for the main Modal.ModalRoot component, detailing its available props.

```APIDOC
## Modal.ModalRoot

### Description
The root component for the modal. This component extends the attributes of a `div` element.

### Method
Component

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
<Modal.ModalRoot>
  {/* Modal content */}
</Modal.ModalRoot>
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
None

### Props
- **className** (string) - Optional - Component class name.
- **fullscreenOnMobile** (boolean) - Optional - Defaults to `true`. Whether the modal is in fullscreen if the app is in mobile view.
- **hideShadow** (boolean) - Optional - Defaults to `false`. Whether the shadow is hidden.
- **onAnimationEnd** (): string - Optional - Function ran when the modal stopped animating.
- **returnRef** (Ref<unknown>) - Optional - A returned ref for the modal element.
- **role** (string) - Optional - Defaults to `dialog`. The ARIA role for the modal element.
- **size** (string) - Optional - Defaults to `small`. The size of the modal.
- **transitionState** (string) - Optional - The current transition state of the modal.
```

--------------------------------

### Get a Webpack Module by its Properties

Source: https://guide.replugged.dev/docs/plugins/modules

This code illustrates how to find a module using `getByProps`, which requires an array of property names that the module must possess. It also shows an alternative using `getModule` with a filter that checks for these properties.

```javascript
import { webpack } from "replugged";
const { filters, getByProps, waitForModule } = webpack;

export function start() {
  const typingModule = getByProps("getChannelId", "addChangeListener");
  // or:
  const typingModule = getModule(filters.byProps("getChannelId", "addChangeListener"));
}
```

--------------------------------

### Initialize Settings Manager with Default Settings - JavaScript

Source: https://guide.replugged.dev/docs/plugins/settings

Initializes the settings manager with default values and ensures specific keys always exist. This provides a fallback for settings that haven't been explicitly set, guaranteeing their presence and type.

```javascript
import { settings } from "replugged";

interface Settings {
  foo?: string;
  bar?: number;
}

const defaultSettings = {
  foo: "hello",
} satisfies Partial<Settings>;

const cfg = await settings.init<Settings, keyof typeof defaultSettings>(
  "YOUR_PLUGIN_ID",
  defaultSettings,
);
```

--------------------------------

### Open a Modal with Custom Content - JavaScript

Source: https://guide.replugged.dev/docs/plugins/modules/components/Modal

Demonstrates how to open a modal using the `modal.openModal` function from the Replugged common module. It shows how to structure the modal with a header, content, and footer using Replugged's `Modal` components. Dependencies include the `common` and `components` modules from Replugged.

```javascript
import { common, components } from "replugged";
const { modal } = common;
const { Modal } = components;

modal.openModal((props) => (
  <Modal.ModalRoot {...props}>
    <Modal.ModalHeader>{/* Your components for the header here */}</Modal.ModalHeader>
    <Modal.ModalContent>{/* Your components here */}</Modal.ModalContent>
    <Modal.ModalFooter>{/* Your components for the footer here */}</Modal.ModalFooter>
  </Modal.ModalRoot>
));
```

--------------------------------

### Get Raw Webpack Module by Props in JavaScript

Source: https://guide.replugged.dev/docs/plugins/modules

Retrieves the raw, unprocessed webpack module that matches the specified properties. This option (`raw: true`) is used when Replugged's default processing might interfere with the properties you need.

```javascript
getByProps(["getChannelId", "addChangeListener"], { raw: true });
```

--------------------------------

### Get Function Key by Source Code for Injection in JavaScript

Source: https://guide.replugged.dev/docs/plugins/modules

Retrieves the property name (key) of a function within a module that matches the given source code. This key can then be used with the `Injector` API to hook into or modify the function's behavior.

```javascript
import { Injector, webpack } from "replugged";
const { getBySource, getFunctionKeyBySource } = webpack;
const injector = new Injector();

export function start() {
  const module = getBySource("YOUR QUERY HERE");
  const keyInModule = getFunctionKeyBySource(module, "YOUR QUERY HERE");

  injector.after(module, keyInModule, (args, res) => {
    console.log("Function was called!", { args, res });
  });
}
```

--------------------------------

### Using the Replugged Loader Component

Source: https://guide.replugged.dev/docs/plugins/modules/components/Loader

Demonstrates how to import and render the Replugged Loader component with a specified type. The component's behavior and appearance can be customized using its props.

```javascript
import { components } from "replugged";
const { Loader } = components;

<Loader type={Loader.Type.WANDERING_CUBES} />;

```

--------------------------------

### Get Webpack Module or Function by Source Code in JavaScript

Source: https://guide.replugged.dev/docs/plugins/modules

Finds a module or a specific function within a module by matching its source code against a provided string or regular expression. This is useful for identifying modules or functions when their exact export name is unknown.

```javascript
import { webpack } from "replugged";
const { getBySource, getFunctionBySource } = webpack;

export function start() {
  const module = getBySource("YOUR QUERY HERE");
  const functionInModule = getFunctionBySource(module, "YOUR QUERY HERE");
}
```
Tokens:
Raw