mirror of
https://github.com/strapi/strapi.git
synced 2025-08-18 21:57:46 +00:00
78 lines
26 KiB
HTML
78 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Front-end Development | Strapi Docs</title>
|
|
<meta name="description" content="API creation made simple, secure and fast.">
|
|
|
|
|
|
<link rel="preload" href="/documentation/assets/css/styles.a8210063.css" as="style"><link rel="preload" href="/documentation/assets/js/app.a8210063.js" as="script"><link rel="preload" href="/documentation/assets/js/63.66946dde.js" as="script"><link rel="prefetch" href="/documentation/assets/js/28.9b077c15.js"><link rel="prefetch" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="prefetch" href="/documentation/assets/js/1.77d89b12.js"><link rel="prefetch" href="/documentation/assets/css/2.styles.08038ddb.css"><link rel="prefetch" href="/documentation/assets/js/2.08038ddb.js"><link rel="prefetch" href="/documentation/assets/js/3.4d92d5e3.js"><link rel="prefetch" href="/documentation/assets/js/4.385ae6a0.js"><link rel="prefetch" href="/documentation/assets/js/5.edd21cb3.js"><link rel="prefetch" href="/documentation/assets/js/6.fd6e4b24.js"><link rel="prefetch" href="/documentation/assets/js/7.e1f45fa9.js"><link rel="prefetch" href="/documentation/assets/js/8.dc78e1c2.js"><link rel="prefetch" href="/documentation/assets/js/9.fd6a21e6.js"><link rel="prefetch" href="/documentation/assets/js/10.f9e7d997.js"><link rel="prefetch" href="/documentation/assets/js/11.bfb9de0f.js"><link rel="prefetch" href="/documentation/assets/js/12.124227d1.js"><link rel="prefetch" href="/documentation/assets/js/13.d8092700.js"><link rel="prefetch" href="/documentation/assets/js/14.7cfd4cb8.js"><link rel="prefetch" href="/documentation/assets/js/15.55a20f7c.js"><link rel="prefetch" href="/documentation/assets/js/16.5c84c402.js"><link rel="prefetch" href="/documentation/assets/js/17.1c93d494.js"><link rel="prefetch" href="/documentation/assets/js/18.e1f1758f.js"><link rel="prefetch" href="/documentation/assets/js/19.8d1b00cd.js"><link rel="prefetch" href="/documentation/assets/js/20.856d7bdd.js"><link rel="prefetch" href="/documentation/assets/js/21.6f851286.js"><link rel="prefetch" href="/documentation/assets/js/22.7ddb4e1d.js"><link rel="prefetch" href="/documentation/assets/js/23.15e5a0c3.js"><link rel="prefetch" href="/documentation/assets/js/24.6fdf34d0.js"><link rel="prefetch" href="/documentation/assets/js/25.21c9a549.js"><link rel="prefetch" href="/documentation/assets/js/26.6608295c.js"><link rel="prefetch" href="/documentation/assets/js/27.2c9596ea.js"><link rel="prefetch" href="/documentation/assets/js/29.8ea8ecc1.js"><link rel="prefetch" href="/documentation/assets/js/30.5d2829b8.js"><link rel="prefetch" href="/documentation/assets/js/31.fad00a3a.js"><link rel="prefetch" href="/documentation/assets/js/32.a6900221.js"><link rel="prefetch" href="/documentation/assets/js/33.bbfb3084.js"><link rel="prefetch" href="/documentation/assets/js/34.0eb2f8aa.js"><link rel="prefetch" href="/documentation/assets/js/35.76c29241.js"><link rel="prefetch" href="/documentation/assets/js/36.dfcc07a1.js"><link rel="prefetch" href="/documentation/assets/js/37.173a8112.js"><link rel="prefetch" href="/documentation/assets/js/38.b86fac79.js"><link rel="prefetch" href="/documentation/assets/js/39.a7d50afe.js"><link rel="prefetch" href="/documentation/assets/js/40.0415492d.js"><link rel="prefetch" href="/documentation/assets/js/41.5ef681df.js"><link rel="prefetch" href="/documentation/assets/js/42.fdd80522.js"><link rel="prefetch" href="/documentation/assets/js/43.03b496f2.js"><link rel="prefetch" href="/documentation/assets/js/44.3f55a367.js"><link rel="prefetch" href="/documentation/assets/js/45.6746c3dc.js"><link rel="prefetch" href="/documentation/assets/js/46.ff6bc353.js"><link rel="prefetch" href="/documentation/assets/js/47.53b7147a.js"><link rel="prefetch" href="/documentation/assets/js/48.31a883aa.js"><link rel="prefetch" href="/documentation/assets/js/49.18bd1a60.js"><link rel="prefetch" href="/documentation/assets/js/50.9b6079cd.js"><link rel="prefetch" href="/documentation/assets/js/51.b67aee1b.js"><link rel="prefetch" href="/documentation/assets/js/52.62bc63b6.js"><link rel="prefetch" href="/documentation/assets/js/53.2c567c55.js"><link rel="prefetch" href="/documentation/assets/js/54.6cc10d25.js"><link rel="prefetch" href="/documentation/assets/js/55.7faca13f.js"><link rel="prefetch" href="/documentation/assets/js/56.0b06ad54.js"><link rel="prefetch" href="/documentation/assets/js/57.a87c48df.js"><link rel="prefetch" href="/documentation/assets/js/58.1c6547d9.js"><link rel="prefetch" href="/documentation/assets/js/59.06f908d7.js"><link rel="prefetch" href="/documentation/assets/js/60.b5156b8d.js"><link rel="prefetch" href="/documentation/assets/js/61.1d5cafa9.js"><link rel="prefetch" href="/documentation/assets/js/62.ccacebe2.js"><link rel="prefetch" href="/documentation/assets/js/64.d53bdeb7.js"><link rel="prefetch" href="/documentation/assets/js/65.0cd2da1f.js"><link rel="prefetch" href="/documentation/assets/js/66.03059dce.js"><link rel="prefetch" href="/documentation/assets/js/67.6f988923.js"><link rel="prefetch" href="/documentation/assets/js/68.303c1a05.js"><link rel="prefetch" href="/documentation/assets/js/69.3f4ed952.js"><link rel="prefetch" href="/documentation/assets/js/70.531d76be.js"><link rel="prefetch" href="/documentation/assets/js/71.ab3e74fc.js">
|
|
<link rel="stylesheet" href="/documentation/assets/css/styles.a8210063.css"><link rel="stylesheet" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="stylesheet" href="/documentation/assets/css/2.styles.08038ddb.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/documentation/" class="home-link router-link-active"><!----> <span class="site-name">
|
|
Strapi Docs
|
|
</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div><select class="version-selector"><option value="/3.x.x/" selected="selected">Version 3.x.x</option><option value="/1.x.x/">Version 1.x.x</option></select></div> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>UsefulLinks</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/" class="sidebar-link">Introduction</a></li><li><a href="https://strapi.io" class="sidebar-link">Strapi Website</a></li><li><a href="https://github.com/strapi/strapi" class="sidebar-link">GitHub Repository</a></li><li><a href="https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md" class="sidebar-link">Contribution Guide</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Getting started</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/documentation/3.x.x/getting-started/quick-start.html" class="sidebar-link">Quick start</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Globals</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/api-reference/reference.html" class="sidebar-link">API Reference</a></li><li><a href="/documentation/3.x.x/cli/CLI.html" class="sidebar-link">Command Line Interface (CLI)</a></li><li><a href="/documentation/3.x.x/concepts/concepts.html" class="sidebar-link">Concepts</a></li><li><a href="/documentation/3.x.x/configurations/configurations.html" class="sidebar-link">Configurations</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/guides/authentication.html" class="sidebar-link">Authentication</a></li><li><a href="/documentation/3.x.x/guides/controllers.html" class="sidebar-link">Controllers</a></li><li><a href="/documentation/3.x.x/guides/deployment.html" class="sidebar-link">Deployment</a></li><li><a href="/documentation/3.x.x/guides/email.html" class="sidebar-link">Email</a></li><li><a href="/documentation/3.x.x/guides/filters.html" class="sidebar-link">Filters</a></li><li><a href="/documentation/3.x.x/guides/graphql.html" class="sidebar-link">GraphQL</a></li><li><a href="/documentation/3.x.x/guides/i18n.html" class="sidebar-link">Internationalization</a></li><li><a href="/documentation/3.x.x/guides/models.html" class="sidebar-link">Models</a></li><li><a href="/documentation/3.x.x/guides/policies.html" class="sidebar-link">Policies</a></li><li><a href="/documentation/3.x.x/guides/public-assets.html" class="sidebar-link">Public Assets</a></li><li><a href="/documentation/3.x.x/guides/requests.html" class="sidebar-link">Request</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Advanced</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/advanced/customize-admin.html" class="sidebar-link">Admin panel</a></li><li><a href="/documentation/3.x.x/advanced/hooks.html" class="sidebar-link">Hooks</a></li><li><a href="/documentation/3.x.x/advanced/logging.html" class="sidebar-link">Logging</a></li><li><a href="/documentation/3.x.x/advanced/middlewares.html" class="sidebar-link">Middlewares</a></li><li><a href="/documentation/3.x.x/advanced/usage-tracking.html" class="sidebar-link">Usage tracking</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Help</span> <!----></p> <ul class="sidebar-group-items"><li><a href="https://github.com/strapi/strapi/wiki" class="sidebar-link">Migration guides</a></li><li><a href="/documentation/3.x.x/tutorials/" class="sidebar-link">Tutorials</a></li></ul></div></li></ul> </div> <div class="page"><div class="content"><h1 id="front-end-development"><a href="#front-end-development" aria-hidden="true" class="header-anchor">#</a> Front-end Development</h1> <p>This section explains how to create your plugin interface in the admin panel. Refer to the Plugin Development <a href="/documentation/3.x.x/plugin-development/quick-start.html">Quick Start Section</a> to start the project in development mode.</p> <h2 id="introduction"><a href="#introduction" aria-hidden="true" class="header-anchor">#</a> Introduction</h2> <p>Strapi's admin panel and plugins system aim to be an easy and powerful way to create new features.</p> <p>The admin panel is a <a href="https://facebook.github.io/react/" target="_blank" rel="noopener noreferrer">React<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> application which can embed other React applications. These other React applications are the <code>admin</code> parts of each Strapi's plugins.</p> <h2 id="routing"><a href="#routing" aria-hidden="true" class="header-anchor">#</a> Routing</h2> <p>The routing is based on the <a href="https://reacttraining.com/react-router/web/guides/philosophy" target="_blank" rel="noopener noreferrer">React Router V4<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, due to it's implementation each route is declared in the <code>containers/App/index.js</code> file.</p> <p>Also, we chose to use the <a href="https://reacttraining.com/react-router/web/api/Switch" target="_blank" rel="noopener noreferrer">Switch Router<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> because it renders a route exclusively.</p> <p><strong>Route declaration :</strong></p> <p>Let's say that you want to create a route <code>/user</code> with params <code>/:id</code> associated with the container UserPage.</p> <p>The declaration would be as followed :</p> <p><strong>Path —</strong> <code>plugins/my-plugin/admin/src/containers/App/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> UserPage <span class="token keyword">from</span> <span class="token string">'containers/UserPage'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>myPlugin<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Switch<span class="token operator">></span>
|
|
<span class="token operator"><</span>Route exact path<span class="token operator">=</span><span class="token string">"/plugins/my-plugin/user/:id"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>UserPage<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
</code></pre></div><p>See the <a href="/documentation/3.x.x/plugin-development/frontend-use-cases.html#handle-user-navigation">Front-end Use Cases</a> for more informations.</p> <h2 id="data-flow"><a href="#data-flow" aria-hidden="true" class="header-anchor">#</a> Data flow</h2> <p>Each plugin has its own data store, so it stays completely independent from the others.</p> <p>Data flow is controlled thanks to Redux and redux-sagas.</p> <h2 id="styling"><a href="#styling" aria-hidden="true" class="header-anchor">#</a> Styling</h2> <p>The <a href="http://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap styles<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> are inherited by the plugins. However, each component has its own styles, so it possible to completely customize it.</p> <p><strong>See the <a href="/documentation/3.x.x/concepts/concepts.html#plugin-styles">plugin styles</a> for informations on its concept.</strong></p> <p>To style a plugin component:</p> <ul><li>Add a <code>styles.scss</code> file in the component directory</li> <li>Require it from the <code>index.js</code> file (<code>import styles from './styles.scss';</code>)</li> <li>Add some styles in the <code>styles.scss</code> file</li></ul> <div class="language- extra-class"><pre class="language-text"><code>.wrapper {
|
|
display: block;
|
|
background: red;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
</code></pre></div><p>Use this style in the component: <code><div className={styles.wrapper}></div></code>.</p> <div class="note custom-block"><p>if you want to use several classes:</p></div> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> cn <span class="token keyword">from</span> <span class="token string">'classnames'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> styles <span class="token keyword">from</span> <span class="token string">'./styles.scss'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">cn</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>otherClass<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
</code></pre></div><h2 id="i18n"><a href="#i18n" aria-hidden="true" class="header-anchor">#</a> i18n</h2> <p><a href="https://github.com/yahoo/react-intl" target="_blank" rel="noopener noreferrer">React Intl<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.</p> <p><strong>Usage</strong></p> <p>We recommend to set all your components text inside the translations folder.</p> <p>The example below shows how to use i18n inside your plugin.</p> <p><strong>Define all your ids with the associated message:</strong></p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/translations/en.json</code>.</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
|
|
<span class="token property">"notification.error.message"</span><span class="token operator">:</span> <span class="token string">"An error occurred"</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/translations/fr.json</code></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
|
|
<span class="token property">"notification.error.message"</span><span class="token operator">:</span> <span class="token string">"Une erreur est survenue"</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p><strong>Usage inside a component</strong></p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/components/Foo/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> FormattedMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-intl'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> SomeOtherComponent <span class="token keyword">from</span> <span class="token string">'components/SomeOtherComponent'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>foo<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>FormattedMessage id<span class="token operator">=</span><span class="token string">"my-plugin.notification.error.message"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>SomeOtherComponent <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> Foo<span class="token punctuation">;</span>
|
|
</code></pre></div><p>See <a href="https://github.com/yahoo/react-intl/wiki/Components#formattedmessage" target="_blank" rel="noopener noreferrer">the documentation<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> for more extensive usage.</p> <h2 id="generators"><a href="#generators" aria-hidden="true" class="header-anchor">#</a> Generators</h2> <p>You can use generators to create React components or containers for your plugin.</p> <ol><li>In your terminal go to your plugin folder <code>cd plugins/my-plugin</code></li> <li>Run <code>npm run generate</code> and choose the type of component your want to create</li></ol></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/strapi/strapi/edit/master/docs/3.x.x/plugin-development/frontend-development.md" target="_blank" rel="noopener noreferrer">Improve this page</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div></div></div>
|
|
<script src="/documentation/assets/js/63.66946dde.js" defer></script><script src="/documentation/assets/js/app.a8210063.js" defer></script>
|
|
</body>
|
|
</html>
|