JSDoc: 06. Writing your own Components

Ok - so you have everything set up and now you want to change how a particular Resource looks.

For instance you may want to show a google map for location fields, or even present some values as a graph.

You can do this all by writing your custom components.

Example of overrinding how dashboard looks:

AdminBroOptions:

const AdminBroOptions = {
  ...
  dashboard: {
    component: AdminBro.bundle('./my-dashboard-component')
  },
  ...
}

Dashboard component: ./my-dashboard-component.jsx

import React from 'react'
import { WrapperBox } from 'admin-bro'

const Dashboard = (props) => {
  return (
    <WrapperBox>My custom dashboard</WrapperBox>
  )
}

export default Dashboard

As you can see AdminBro uses React as a frontend framework. So before you proceed - make sure you know how react works.

Where you can insert your custom components?

Currently there are 3 places where you can inject components to alter how AdminBro looks:

overriding how properties are rendered in PropertyOptions#components by using components object (PLURAL)
creating new or update default actions by overriding Action#component param
changing how the dashbord looks like by using dashboard.component param.

Requiring component

First of all - you have to require them by using AdminBro.bundle function. What it does - it gives your comopnent an uniq ID and sends it to the bundling process.

You can do it like this: { component: AdminBro.bundle('./path-to-your-jsx-or-tsx-file') }

All files requried by AdminBro.bundle has to have one default export - the one with your react component.

You can use either .jsx or .tsx extension for your components.

Dependencies

AdminBro bundler gives you the ability to import following dependencies without the need of requiring them in your package.json file:

State management

Routing

Styling

styled-components

Other

So you can do something like this:

// your-custom-component.jsx
import React from 'react'
import { withRouter } from 'react-router-dom'

const YourComponent (props) => {...}

export default withRouter(YourComponent)

Props passed to components

In your components you can use props passed by their controlling components.

Currently we have 2 controlling components:

one for an action: BaseActionComponent with ActionProps
and one for custom property field: BasePropertyComponent with BasePropertyProps

Check out their documentation to see available props

BTW - Dashboard doesn't have any controlling component - so no props passed there.

Reusing UI Components of AdminBro

AdminBro gives you the ability to reuse its components. You can do this by simply requiring them:

import { Label } from 'admin-bro'

const YourComponent (props) => {(
  <Label>Some styled text<Label>
)}

You can choose from multiple components like:

Each of the components is described with the playground option.

Using other AdminBro frontend classes and objects

AdminBro also exposes following classes:

You can use them like this:

import { ApiClient, ViewHelpers } from 'admin-bro'