{"id":18654100,"url":"https://github.com/dstuecken/react-settings-pane","last_synced_at":"2025-06-10T09:05:17.515Z","repository":{"id":8682084,"uuid":"59322453","full_name":"dstuecken/react-settings-pane","owner":"dstuecken","description":"React Component to display a neat settings page for customizable configuration in your app","archived":false,"fork":false,"pushed_at":"2023-03-03T08:21:03.000Z","size":3683,"stargazers_count":55,"open_issues_count":19,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-16T21:45:34.352Z","etag":null,"topics":["javascript","react","react-settings-pane","reactjs","settings-pane"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dstuecken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-20T19:53:00.000Z","updated_at":"2025-03-24T09:21:32.000Z","dependencies_parsed_at":"2024-06-19T01:52:55.121Z","dependency_job_id":"934230d6-46dd-4d6f-a3ac-28f97981ed1f","html_url":"https://github.com/dstuecken/react-settings-pane","commit_stats":{"total_commits":67,"total_committers":5,"mean_commits":13.4,"dds":"0.34328358208955223","last_synced_commit":"265eee718bcaa78c52b54b2a9b584e347c99ab83"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dstuecken%2Freact-settings-pane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dstuecken%2Freact-settings-pane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dstuecken%2Freact-settings-pane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dstuecken%2Freact-settings-pane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dstuecken","download_url":"https://codeload.github.com/dstuecken/react-settings-pane/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dstuecken%2Freact-settings-pane/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259043765,"owners_count":22797160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","react-settings-pane","reactjs","settings-pane"],"created_at":"2024-11-07T07:13:59.464Z","updated_at":"2025-06-10T09:05:17.488Z","avatar_url":"https://github.com/dstuecken.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-settings-pane\n\n[![npm version](https://img.shields.io/npm/v/react-settings-pane.svg?style=flat-square)](https://www.npmjs.com/package/react-settings-pane) \n[![Build Status](https://travis-ci.org/dstuecken/react-settings-pane.svg?branch=master)](https://travis-ci.org/dstuecken/react-settings-pane)\n\n\u003e *React Component to display a neat settings page that enables customizable configuration in your app. It should easily integrate into popup components to also display it as a popup.*\n\n## Installation\n\n```bash\nnpm i react-settings-pane --save\n```\n\n## Demo\n\n[Open Demo](http://www.dvlpr.de/react/settings-pane/examples/index.html)\n\n\u003cimg src=\"https://raw.githubusercontent.com/dstuecken/react-settings-pane/master/examples/demo.png\" width=\"500\"\u003e\n\n## Usage Example\n\nFor a local demo, check: examples/index.html\n\n\n#### Import into your react project\n\n```js\nimport {SettingsPane, SettingsPage, SettingsContent, SettingsMenu} from 'react-settings-pane'\n```\n\n```js\n// Render function of any of your components:\nrender() {\n// You will maybe receive your settings from this.props or do a fetch request in your componentWillMount\n //let settings = settings;\n\n // But here is an example of how it should look like:\n let settings = {\n   'mysettings.general.name': 'Dennis Stücken',\n   'mysettings.general.color-theme': 'purple',\n   'mysettings.general.email': 'dstuecken@react-settings-pane.com',\n   'mysettings.general.picture': 'earth',\n   'mysettings.profile.firstname': 'Dennis',\n   'mysettings.profile.lastname': 'Stücken',\n };\n\n // Define your menu\n const menu = [\n   {\n     title: 'General',          // Title that is displayed as text in the menu\n     url: '/settings/general'  // Identifier (url-slug)\n   },\n   {\n     title: 'Profile',\n     url: '/settings/profile'\n   }\n ];\n\n // Define one of your Settings pages\n const dynamicOptionsForProfilePage = [\n   {\n     key: 'mysettings.general.email',\n     label: 'E-Mail address',\n     type: 'text',\n   },\n   {\n     key: 'mysettings.general.password',\n     label: 'Password',\n     type: 'password',\n   }\n ];\n\n // Save settings after close\n const leavePaneHandler = (wasSaved, newSettings, oldSettings) =\u003e {\n   // \"wasSaved\" indicates wheather the pane was just closed or the save button was clicked.\n\n   if (wasSaved \u0026\u0026 newSettings !== oldSettings) {\n     // do something with the settings, e.g. save via ajax.\n   }\n };\n \n const settingsChanged = (changedSettings) =\u003e {\n   // this is triggered onChange of the inputs\n };\n\n // Return your Settings Pane\n return (\n    \u003cSettingsPane items={menu} index=\"/settings/general\" settings={settings} onPaneLeave={leavePaneHandler}\u003e\n      \u003cSettingsMenu headline=\"General Settings\" /\u003e\n      \u003cSettingsContent closeButtonClass=\"secondary\" saveButtonClass=\"primary\" header={true}\u003e\n        \u003cSettingsPage handler=\"/settings/general\"\u003e\n           \u003cfieldset className=\"form-group\"\u003e\n             \u003clabel for=\"profileName\"\u003eName: \u003c/label\u003e\n             \u003cinput type=\"text\" className=\"form-control\" name=\"mysettings.general.name\" placeholder=\"Name\" id=\"general.ame\" onChange={settingsChanged} defaultValue={settings['mysettings.general.name']} /\u003e\n           \u003c/fieldset\u003e\n           \u003cfieldset className=\"form-group\"\u003e\n             \u003clabel for=\"profileColor\"\u003eColor-Theme: \u003c/label\u003e\n             \u003cselect name=\"mysettings.general.color-theme\" id=\"profileColor\" className=\"form-control\" defaultValue={settings['mysettings.general.color-theme']}\u003e\n               \u003coption value=\"blue\"\u003eBlue\u003c/option\u003e\n               \u003coption value=\"red\"\u003eRed\u003c/option\u003e\n               \u003coption value=\"purple\"\u003ePurple\u003c/option\u003e\n               \u003coption value=\"orange\"\u003eOrange\u003c/option\u003e\n             \u003c/select\u003e\n           \u003c/fieldset\u003e\n        \u003c/SettingsPage\u003e\n        \u003cSettingsPage handler=\"/settings/profile\" options={dynamicOptionsForProfilePage} /\u003e\n      \u003c/SettingsContent\u003e\n    \u003c/SettingsPane\u003e\n )\n}\n```\n\n## Formal API\n#### \u0026lt;SettingsPane /\u003e\n\n- `settings: object`: Key/value object with your settings. Pased down to all SettingsPages.\n- `items: array`: The menu items for the left menu\n- `index: string`: The index Page (url-slug of it) \n- `onPaneLeave: function`: Callback function that is emitted after closing the pane\n- `onMenuItemClick: function`: (optional) Callback function for each menu-item click. Could be used to push current url state to browser History.\n\n#### \u0026lt;SettingsMenu /\u003e\n\n- `headline: string`: Window Title on top of the left menu \n\n#### \u0026lt;SettingsContent /\u003e\n\n- `header: bool|React.Component`: true = Title of current menu Item is displayed as an h2, can also be a React.Component for a custom headline. \n- `closeButtonClass: string`: custom className for the close button  \n- `saveButtonClass: string`:  custon className for the save button\n\n#### \u0026lt;SettingsPage /\u003e\n\n- `handler: string`: URL handler, this has to match with your menu url property.\n- `options: array`: (optional) Options for a programattically generated settings page. See dynamicOptionsForGeneralPage for an example.\n\n### Custom Styling\n\nThese are the default css classes: \n\n* div.settings-pane\n* form.settings\n* div.settings-left\n* ul.settings-menu\n* ul.settings-menu li.active\n* div.settings-content\n* div.headline\n* div.settings-page\n* div.scroller\n* div.settings-innerpage\n* div.settings-footer\n* div.settings.close\n\n### History callbacks\n\nIt is possible to push the url state to the browser history using react-router or whatever you feel like. This can be handled with a callback function that is passed to the SettingsPane component.\n\n*Example*\n\n```js\n// Import browser history from react router\nimport { browserHistory } from 'react-router'\n\n// Pass a callback function to the SettingsPane property \"onMenuItemClick\"\n\u003cSettingsPane onMenuItemClick={(menuItem) =\u003e browserHistory.push(menuItem.url)} /\u003e\n```\n\n## License\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdstuecken%2Freact-settings-pane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdstuecken%2Freact-settings-pane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdstuecken%2Freact-settings-pane/lists"}