Skip to main content
Version: Current (3.x)

Customizing the UI

DATA VIZ provides a way to extend the UI by adding custom components. This guide will show you how to add a custom component to the UI.

tip

You can also use functions from wp-react-lib to extend the UI.

Adding A new Component​

  • In the front/app/embeddable folder, create a new file/folder with the name of the component you want to create.

  • Create a new component in the front/app/embeddable folder.

import React from 'react';

const MyComponent = () => {
  return <div>My Component</div>;
};

export default MyComponent;
  • Register the component in the front/app/embeddable/index.ts file.
tip

It is recommended to use the lazy function to import the component. This is because the component will be loaded only when it is needed and also perform code splitting. This is also beneficial for performance.

const ExampleComponentLazy = lazy(() => import('./MyExampleComponent'));

const embeddables = {
  // existing embeddables...
  MyComponent: ExampleComponentLazy,
}

customizer.registerCustomEmbeddables(embeddables)
  • Run the project and see the changes.
warning
  • The custom component needs to have a corresponding wordpress blocks for it to be rendered by Wordpress.

Adding A New Reducer​

  • In the front/app/reducers folder, create a new file with the name of the reducer you want to create.

  • Create a new reducer in the front/app/reducers folder.

import { createSlice } from '@reduxjs/toolkit';

const myReducer = createSlice({
  name: 'myReducer',
  initialState: {

  },
  reducers: {
    myAction: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { myAction } = myReducer.actions;

export default myReducer.reducer;

  • Register the reducer in the front/app/reducers/index.ts file.
import myReducer from './my-reducer';

const reducers = {
  // existing reducers...
  myReducer,
}

customizer.registerCustomReducers(reducers)
  • Run the project and see the changes.

  • We provide a way to customize the header and footer of the application.

  • To customize the header or footer, you need to create a new component in the front/app/components/layout folder.

  • Create a new component in the front/app/components/layout folder.

import React from 'react';

const MyHeader = () => {
  return <div>My Header</div>;
};
  • Import the component in any of the routes that have the following component:
    • ResponsiveContainer
    • PreviewContainer
    • PreviewPageContainer
    • SlugContainer
    • SlugPostContainer
import MyHeader from '~/components/layout/MyHeader';

const RouteComponent = () => {
  return (
    <ResponsiveContainer header={<MyHeader />}>
      // your route content...
    </ResponsiveContainer>
  )
}