es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo renderizar un archivo MD para un addon personalizado de Storybook?

28 Jul, 2023 Programación

Estoy intentando renderizar un archivo MD pasado por parámetros.
Puedo lograr que el texto se muestre correctamente, pero realmente quiero que esté formateado como un archivo MD.

Estaba intentando usar @storybook/addon-docs, pero parece que estos deben ser utilizados en un archivo MDX en lugar de directamente en React, ya que obtengo este error: Uncaught TypeError: storyById is not a function.

import React from 'react';
import { useParameter } from '@storybook/api';
import { Title, Description } from '@storybook/addon-docs';
import { PARAM_KEY } from '../constants';

const WhatsNewPanel = (props: any) => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value : 'No se ha definido ningún Markdown';
  return (
    <>
      <title>¿Qué hay de nuevo?</title>
      <description>{item}</description>

  );
};

export default WhatsNewPanel;

Si quito los componentes Title y Description, puedo ver el texto MD sin formato correctamente.

¿Alguien sabe de una API o una forma de renderizar el archivo MD formateado?

Mi código de PR.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás teniendo problemas para renderizar un archivo MD pasado como parámetro en React. Si bien puedes mostrar correctamente el texto, no logras formatearlo como un archivo MD.

    Mencionas que intentaste usar @storybook/addon-docs, pero encontraste un error que indica que storyById no es una función. Este error suele aparecer cuando @storybook/addon-docs no se utiliza correctamente, ya que este complemento está diseñado específicamente para ser usado con archivos MDX en lugar de directamente en React.

    Para renderizar un archivo MD en el formato correcto, puedes considerar el uso de una biblioteca de terceros como react-markdown. Con esta biblioteca, puedes analizar y renderizar fácilmente texto Markdown en componentes de React.

    import React from 'react';
import ReactMarkdown from 'react-markdown';

const MyComponent = ({ markdownText }) => (
  <div>
    <reactmarkdown source="{markdownText}"></reactmarkdown>
  </div>
);

    En este ejemplo, el componente ReactMarkdown renderizará markdownText en el formato correcto utilizando la biblioteca react-markdown.

    En tu código, puedes reemplazar el componente Description con el componente ReactMarkdown y pasar item como la propiedad source.

    import React from 'react';
import { useParameter } from '@storybook/api';
import ReactMarkdown from 'react-markdown';
import { PARAM_KEY } from '../constants';

const WhatsNewPanel = (props) => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value : 'No Markdown Defined';
  return (
    <>
      <h1>¿Qué hay de nuevo?</h1>
      <reactmarkdown source="{item}"></reactmarkdown>

  );
};

export default WhatsNewPanel;

    Con este cambio, item se renderizará en el formato correcto utilizando la biblioteca react-markdown.

Comments are closed.