{"id":21816597,"url":"https://github.com/5monkeys/django-bananas.js","last_synced_at":"2025-04-14T01:15:23.854Z","repository":{"id":33955480,"uuid":"167173166","full_name":"5monkeys/django-bananas.js","owner":"5monkeys","description":"React admin frontend for Django","archived":false,"fork":false,"pushed_at":"2024-10-07T15:04:56.000Z","size":3986,"stargazers_count":9,"open_issues_count":22,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-14T01:15:14.026Z","etag":null,"topics":[],"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/5monkeys.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":"2019-01-23T11:39:12.000Z","updated_at":"2024-10-07T15:05:02.000Z","dependencies_parsed_at":"2024-06-21T15:36:14.722Z","dependency_job_id":"5964c871-8ff9-4511-ba89-8f6628aea8d4","html_url":"https://github.com/5monkeys/django-bananas.js","commit_stats":{"total_commits":361,"total_committers":9,"mean_commits":"40.111111111111114","dds":"0.44875346260387816","last_synced_commit":"d2648a7ddee0c9f577d5e7dc311fa0f9db3c7f9b"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjango-bananas.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjango-bananas.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjango-bananas.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjango-bananas.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5monkeys","download_url":"https://codeload.github.com/5monkeys/django-bananas.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804824,"owners_count":21164135,"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":[],"created_at":"2024-11-27T15:35:28.318Z","updated_at":"2025-04-14T01:15:23.820Z","avatar_url":"https://github.com/5monkeys.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# django-bananas.js\n\n```\nnpm install django-bananas react react-dom @material-ui/core @material-ui/icons final-form final-form-arrays react-final-form react-final-form-arrays\n```\n\n```jsx\nimport Bananas from \"django-bananas\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nReactDOM.render(\n  \u003cBananas.App\n    api=\"http://localhost:8000/api\"\n    pages={route =\u003e import(`./pages/${route}`)}\n  /\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n## Settings\n\n| Property | Type | Default | Choices |\n| :-- | :-- | :-- | :-- |\n| **api** | String, Object | **Required** |  |\n| **pages** | Function | **Required** |  |\n| **title** | String | _Bananas_ |  |\n| **logo** | Function, String, Boolean | true |  |\n| **branding** | String | _Bananas_ |  |\n| **version** | String | _v1.0.0_ |  |\n| **theme** | Object | _[django-bananas/themes].default (light)_ |  |\n| **pageTheme** | Object | _undefined_ |  |\n| **nav** | Object, Boolean | _{\"home\": ..., \"bananas.me:list\": ...}_ |  |\n| **layout** | String | _horizontal_ | horizontal, vertical |\n| **permanent** | Boolean | _false_ |  |\n| **collapsed** | Boolean | _false_ |  |\n| **dense** | Boolean | _false_ |  |\n| **editableSettings** | Boolean | _false_ |  |\n| **loginForm** | Function | _undefined_ |  |\n| **logLevel** | String, Object | _WARN_ | INFO, DEBUG, WARN, ERROR, OFF |\n| **prefix** | String | _\"\"_ |  |\n| **customizeContext** | Function | _undefined_ |  |\n| **container** | Function | _React.Fragment_ |  |\n\n### api\n\nBase API URL.\n\n```jsx\n\u003cBananas.App\n  // ...\n  api=\"http://localhost:8000/api\"\n/\u003e\n```\n\nAlternatively, you can pass an object of extra [swagger-js](https://github.com/swagger-api/swagger-js) options. For example, you could add a custom header:\n\n```jsx\n\u003cBananas.App\n  // ...\n  api={{\n    url: \"http://localhost:8000/api\",\n    requestInterceptor: request =\u003e {\n      request.headers.Authorization = \"secret\";\n      return request;\n    },\n  }}\n/\u003e\n```\n\n### pages\n\nA function that dynamically imports pages. A page file should `export default` a React component to render for the given route.\n\n```js\nroute =\u003e import(`./pages/${route}`);\n```\n\nMake sure that the directory containing your page files exists (even if it’s empty)! (`./pages/` in the above example.) Otherwise your build tool might throw an error.\n\n### title\n\nSets trailing part of the document title: `\u003ccurrent page title\u003e | My Admin-App Title`.\n\n### logo\n\nUse _boolean_ `false` to not render a logo, or `true` to show the default _Bananas_ logo. Use a _string_ for an image URL or a _function/component_ for full control.\n\n```jsx\n\u003cBananas.App\n  // ...\n  logo={true | false}\n  logo={\"https://foo.bar/logo.svg\"}\n  logo={\u003cMyLogo /\u003e}\n/\u003e\n```\n\n### branding \u0026 version\n\nShown in the navigation header next to the logo.\n\n### theme \u0026 pageTheme\n\n`theme` and `pageTheme` are _Material UI_ theme objects, either partially or fully created. `pageTheme` is only needed if you want a specific theme for the page area, other than the navigation, boot and login screen.\n\n```jsx\n\u003cBananas.App\n  // ...\n  theme={themes.dark}\n  pageTheme={themes.light}\n/\u003e\n```\n\n### nav\n\nThe `nav` setting lets you define the order of items in the navigation, as well as icons for each item. It is a mapping between navigation endpoints _(operation-id)_ and icons, or an array of navigation endpoints if you want to define order but not icons. Items not mentioned in the mapping or array are put last in alphabetical order, with a fallback icon (if needed).\n\n```jsx\n\u003cBananas.App\n  // ...\n  nav={{\n    // \"home\": MyCustomDashboardIcon,\n    // \"bananas.me:list\": MyCustomUserIcon,\n    \"example.user:list\": PeopleIcon,\n  }}\n/\u003e\n```\n\n### layout\n\nDefines location of the app navigation. Use `horizontal` layout for a side drawer, or `vertical` for a top bar.\n\n### permanent \u0026 collapsed\n\nThe `permanent` and `collapsed` settings is only applicable for `horizontal` layout. Permanent makes the drawer non-collapsable, and collapsable defines the initial state of the drawer.\n\n### dense\n\nSet `dense={true}` for smaller fonts/icons in the navigation.\n\n### loginForm\n\nSet `loginForm` to a react component if you need a custom login form other than the built-in default form/endpoint.\n\n### logLevel\n\nGlobal log level:\n\n```jsx\n\u003cBananas.App\n  // ...\n  logLevel=\"DEBUG\",\n/\u003e\n```\n\nLog level per application label:\n\n```jsx\n\u003cBananas.App\n  // ...\n  logLevel={{\n    bananas: \"WARN\",\n    myapp: \"DEBUG\",\n  }}\n/\u003e\n```\n\n### prefix\n\nPrefix sets the base url for the router. Use this if the admin app is mounted on a sub-path, i.e. `/bananas/`.\n\n### customizeContext\n\nA function that receives the standard `AdminContext` and returns a new context object.\n\n## container\n\nA function (React component) that resides under the AdminContext but above pages. Useful for wrapping the entire app in a custom context so data can persist between pages.\n\n```jsx\n\u003cBananas.App\n  // ...\n  container={MyCustomContainer}\n/\u003e\n```\n\n## Browser support\n\nThe code shipped to npm uses modern JavaScript, supported natively by all evergreen browsers. If you need deeper browser support, you need to configure your build system to transpile and polyfill `node_modules/` code.\n\nIf you use [Create React App](https://facebook.github.io/create-react-app/), which runs Babel on code from npm packages, you can get IE11 support by adding the following to your main entrypoint:\n\n```js\nimport \"react-app-polyfill/ie11\";\nimport \"react-app-polyfill/stable\";\n```\n\n## Example app\n\nThis repo contains an example app in the `app/` folder.\n\n1. Set up and start the backend: [django-bananas](https://github.com/5monkeys/django-bananas).\n\n2. Copy the sample settings:\n\n   ```\n    cp app/src/_bananas.settings.js app/src/bananas.settings.js\n   ```\n\n   You can then play around with different settings in `bananas.settings.js`.\n\n3. Start the example app:\n\n   ```\n   docker-compose up -d\n   ```\n\n   Alternatively, you could run outside docker:\n\n   ```\n   npm ci\n   npm start\n   ```\n\n(If you develop on this package, you need to run `npm ci` and run tests outside docker. See package.json.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fdjango-bananas.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5monkeys%2Fdjango-bananas.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fdjango-bananas.js/lists"}