Create an Addon
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion
Framework:
React

Suivre l'état

Gérer l'état de l'addon entre le Manager et la Prévisualisation

React intègre des hooks tels que useState pour gérer l'état. C'est souvent suffisant. Cependant, dans notre cas, les choses sont un peu plus compliquées. Prenons un moment pour évoquer la façon dont Storybook est architecturé.

Les bases de l'architecture de Storybook

manager preview

Vu de l'extérieur, Storybook présente une interface utilisateur dans son ensemble. Cette interface est en fait composée de deux segments qui communiquent grâce à un canal de communication:

  • Un Manager: l'interface utilisateur où sont rendues la recherche, la navigation, les barres d'outils et les addons de Storybook.
  • La Prévisualisation: une iframe où sont rendues les stories.

Nous devons suivre l'état actif/inactif et nous devons également partager cet état entre le Manager et la Prévisualisation. Par conséquent, plutôt que d'utiliser le hook useState, nous allons utiliser useGlobals mis à disposition par @storybook/api.

Suivre l'état global

Les globales représentent le contexte “global” (comprenez ici indépendant des stories) de Storybook. C'est une façon pratique de partager des informations entre différentes stories, différents addons et décorateurs. Le hook useGlobals vous permet d'accéder à ce contexte depuis l'addon que vous êtes en train de créer.

Jetez un œil à @storybook/addons pour plus d'informations concernant les APIs dédiées aux addons.

L'Addon Kit pré-configure Tool pour utiliser les globales. Renommons la globale pour retranscrire avec plus de précision ce qu'elle fait. La fonction toggleOutline permet à l'utilisateur d'activer ou de désactiver l'addon Outline 👉🏽🔘

L'outil suit l'état actif/inactif

src/Tool.js
import React, { useCallback } from 'react';
import { useGlobals } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { TOOL_ID } from './constants';

export const Tool = () => {
+  const [{ outlineActive }, updateGlobals] = useGlobals();

+  const toggleOutline = useCallback(
    () =>
      updateGlobals({
+        outlineActive: !outlineActive,
      }),
+    [outlineActive]
  );

  return (
    <IconButton
      key={TOOL_ID}
+      active={outlineActive}
       title="Appliquer des contours à la prévisualisation"
+      onClick={toggleOutline}
    >
      <Icons icon="outline" />
    </IconButton>
  );
};
Keep your code in sync with this chapter. View ffd9ccb on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Décorateurs
Interagir avec les stories
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify