search

snapcrunch / electron-preferences

A simple, consistent interface for managing user preferences within an Electron application.
MIT License
121 stars 30 forks source link

Add instructions and/or example of adding a custom input #202

Open mlilback opened 12 months ago

mlilback commented 12 months ago

Is your feature request related to a problem? Please describe. The readme says that "adding new inputs is straightforward". I have no idea how to go about doing this.

Describe the solution you'd like Please add instructions and/or an example on how to add a new input. Preferably using Web Components so minimal experience with React is necessary. Even a React example would be helpful, though.

pvrobays commented 11 months ago

Hi @mlilback Thanks for your question.

Adding new inputs should be quite straightforward but you indeed need to know where to look. Let me try and help you along.

All input components can be found under /src/app/compoments/main/components/group/components/fields. There you'll find all the different input types we currently support in their own directory.

Adding a new one is as simple as:

  1. Add a new directory
  2. Add index.jsx, create your component
  3. add your new component to the fieldMap list in /src/app/components/main/components/group

Once that's done, you should be able to add your new input type in the configuration type, with its own custom options.

Webcomponents can be used (webcomponents in React ), but the React part needed to create a field is very limited so I would advice you to use React if you're going to create a new component from scratch.

To easily test your code, you can use the example application within the repo. To build and run it, use the npm build-example command.

Good luck! I'm curious: what's the component you'd like to add? If you have any more questions, please let me know.

mlilback commented 11 months ago

The app I'm working on lets users save a combination of search filters for convenience.

I'd like a list that shows a detailed description on the side when an item is selected. The list allows deleting but not adding. Reordering would also be useful.

I'm using Quasar which uses Vue, and that's the only modern framework I'm familiar with. But another project I'm doing the server-side for switched to React, so I should be able to figure it out.