Front-end Development

This section explains how to create your plugin interface in the admin panel. Refer to the Plugin Development Quick Start Section to start the project in development mode.

Introduction

Strapi's admin panel and plugins system aim to be an easy and powerful way to create new features.

The admin panel is a React application which can embed other React applications. These other React applications are the admin parts of each Strapi's plugins.

Routing

The routing is based on the React Router V4, due to it's implementation each route is declared in the containers/App/index.js file.

Also, we chose to use the Switch Router because it renders a route exclusively.

Route declaration :

Let's say that you want to create a route /user with params /:id associated with the container UserPage.

The declaration would be as followed :

Path — plugins/my-plugin/admin/src/containers/App/index.js.

import React from 'react';
import UserPage from 'containers/UserPage';

// ...

class App extends React.Component {
  // ...

  render() {
    return (
      <div className={styles.myPlugin}>
        <Switch>
          <Route exact path="/plugins/my-plugin/user/:id" component={UserPage} />
        </Switch>
      </div>
    );
  }
}

// ...

See the Front-end Use Cases for more informations.

Data flow

Each plugin has its own data store, so it stays completely independent from the others.

Data flow is controlled thanks to Redux and redux-sagas.

Styling

The Bootstrap styles are inherited by the plugins. However, each component has its own styles, so it possible to completely customize it.

See the plugin styles for informations on its concept.

To style a plugin component:

Add a styles.scss file in the component directory
Require it from the index.js file (import styles from './styles.scss';)
Add some styles in the styles.scss file

.wrapper {
    display: block;
    background: red;
    height: 100px;
    width: 100px;
}

Use this style in the component: <div className={styles.wrapper}></div>.

Note: if you want to use several classes:

import cn from 'classnames';
import styles from './styles.scss';

// ...

return (
  <div className={cn(styles.wrapper, styles.otherClass)}>{this.props.children}</div>
);

// ...

i18n

React Intl provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

Usage

We recommend to set all your components text inside the translations folder.

The example below shows how to use i18n inside your plugin.

Define all your ids with the associated message:

Path — ./plugins/my-plugin/admin/src/translations/en.json.

{
  "notification.error.message": "An error occurred"
}

Path — ./plugins/my-plugin/admin/src/translations/fr.json

{
  "notification.error.message": "Une erreur est survenue"
}

Usage inside a component

Path — ./plugins/my-plugin/admin/src/components/Foo/index.js.

import { FormattedMessage } from 'react-intl';
import SomeOtherComponent from 'components/SomeOtherComponent';

const Foo = (props) => (
  <div className={styles.foo}>
    <FormattedMessage id="my-plugin.notification.error.message" />
    <SomeOtherComponent {...props} />
  </div>
)

export default Foo;

See the documentation for more extensive usage.

Generators

You can use generators to create React components or containers for your plugin.

In your terminal go to your plugin folder cd plugins/my-plugin
Run npm run generate and choose the type of component your want to create

4.0 KiB Raw Blame History