3. Creating a Settings Page

Settings

Making the Settings Page

Making Settings is Pretty Easy, though there are some differences from what we have done before. In your Plugins Root folder, create a new Folder called components and inside that folder create a file called settings.jsx

Your Folder Hierarchy should look somewhat like this

🗀 example-plugin
 |_ 🗀 components
     |_ settings.jsx
 |_ manifest.json
 |_ index.js

You do this to keep your Plugins neat and tidy (no one wants 200 loose files flying around everywhere)

Next, open your settings.jsx file (you can imagine JSX like a mix of HTML and JS)

const { React } = require('powercord/webpack'); // We have to import React
const { TextInput } = require('powercord/components/settings'); // Here we Import the TextInput Component for later use

//This section is the Page the user sees
module.exports = class settings extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div>
        <TextInput
          onChange={val => this.props.updateSetting('settingToSave', val)}
          defaultValue={this.props.getSetting('settingToSave', 'defaultValue')}
          required={false}
          disabled={false}
          note='This will be shown below the Text Input as a note'
         >
          Settings Field
        </TextInput>
      </div>
    )
  }
}

Lets see what we did here. This part is almost always required to get the base Settings page to work.

module.exports = class settings extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  // your code here
}

whereas the render() method tells Replugged what to render. Here, we render a <div> element and inside that the TextInputcomponent. onChange is where you do things when someone types something into the TextInput.

Importing the Settings into your index.js

Now that we got a fully functioning settings page, we can import it into our Plugin, so grab your index.js

const { Plugin } = require("powercord/entities");
const { React } = require("powercord/webpack"); // You need React, so we Import it here

const Settings = require("./components/settings.jsx"); // get the path to your Settings file

module.exports = class PluginName extends Plugin {
  startPlugin() {
    powercord.api.settings.registerSettings(this.entityID, {
      category: this.entityID,
      label: 'Example Plugin', // This will be the Name visible in the Settings Panel
      render: Settings
    })
  }
  pluginWillUnload() {
    powercord.api.settings.unregisterSettings(this.entityID); // You NEED to unregister the Settings on pluginWillUnload or you might face problems
  }
}

powercord.api.settings.registerSettings() takes the entityId (which conveniently can just be this.entityID) and an object The Objects structure should follow as seen above. render should be linked to your settings.jsx file while the label prop should be the Name your Users should see