在前端开发中，我们经常需要通过示例代码来展示某个组件或者实现某个功能，同时也需要考虑到这些代码可以在线预览。这时候，一个好的工具可以让我们事半功倍。今天我想向大家推荐一个非常实用的NPM包：@kentcdodds/temp-react-live。本文将详细介绍如何使用和配置它。
简介
@kentcdodds/temp-react-live 是一个用于提供在线预览的React组件的代码编辑器。它可以让你更加便捷地将示例代码或者应用程序展示给其他人员查看。
安装
安装这个包很容易。只需要在你的终端中输入以下命令：
npm install @kentcdodds/temp-react-live
或者使用 yarn：
yarn add @kentcdodds/temp-react-live
使用
使用 @kentcdodds/temp-react-live 来展示你的代码非常简单。你只需要按照以下步骤进行操作：
步骤1：导入所需的组件
需要在你的代码中导入开发者提供的命名导出的组件：
import { LiveProvider, LiveEditor, LivePreview, LiveError } from '@kentcdodds/temp-react-live'步骤2：在代码中输出所有的组件
下一步，你需要将你所有的代码输写到 LiveProvider 组件中。这个组件包含了所有的子组件：
<LiveProvider code="<div>hello world</div>"> <LiveEditor /> <LivePreview /> <LiveError /> </LiveProvider>
步骤3：Look，一个码字的editor，可以在线编辑
现在，你已经可以在网页上在线展示你的代码了。
代码编辑
@kentcdodds/temp-react-live 提供了一个编辑器，让你可以随时修改你想要展示的代码。当您编辑代码时，组件将重新加载，以显示最新的代码：
<LiveProvider code='<h1>{greeting}</h1>'>
<LiveEditor />
<LivePreview />
<LiveError />
</LiveProvider>现在，修改组件中的 greeting 变量，例如：
<LiveProvider code='<h1>{greeting}</h1>' scope={{ greeting: 'Hello React!' }}>
<LiveEditor />
<LivePreview />
<LiveError />
</LiveProvider>配置
@kentcdodds/temp-react-live 提供了多种配置选项，让你可以调整展示内容的外观，比如代码颜色、字体大小等等。
更改主题
主题指的是代码框样式的 design，您可以使用 prism-themes 包中的主题， 如以下所示：
import { LiveProvider, LiveEditor, LivePreview, LiveError } from '@kentcdodds/temp-react-live'
import darkTheme from 'prism-react-renderer/themes/dracula'
<LiveProvider theme={darkTheme} code="<div>hello world</div>">
<LiveEditor />
<LivePreview />
<LiveError />
</LiveProvider>编辑代码
除了通过UI编辑器进行编辑之外，你也可以在源码里直接编辑代码。 当你使用 Webpack、Rollup、Parcel等打包工具构建你的应用程序时，你的应用程序将自动进行 Webpack/ Rollup/Parcel的 tree shaking。
-- -------------------- ---- -------
----- ---- - -
----- ---- - -- -- -
----- --------- ----------- - -----------------
------ -
-----
------------------
------- ----------- -- ------------ -- - - ----
--
---------
------
-
-
------------ ---
--------
----- ----- - - ------ ------ -
------------- ----------- --------------
----------- --
------------ --
---------- --
---------------状态
如果您在代码编辑器外部想要处理状态，则可以将其添加到 scope 中：
-- -------------------- ---- -------
------ - ------------- ----------- ------------ --------- - ---- -----------------------------
----- ----- - -
--------- ---------------
---------- ----------------
-------- --------------
------------ ------------------
------- -------------
----------
-------
-------
-
----- ------------ - -
-------- ------
------- ---
-
----- ---- - -
-------- ----- -
----- ------- --------- - --------------------------------------- ----- ----
----- ------------- - ----------------- -- -
------------------ -- --
-------------
-------- ---------------------
---
-- ---
----- ------------------ - ----------------- -- -
------------------ -- --
-------------
------- ---------------------------
---
-- ---
----- - -------- ------ - - -----
------ -
---- -------- -------- ------ ---
------- ----------------- ------------------------ --
------- -------------- ----------------------------- --
----
-------- - --------- - ---- --------- -- ------ --------
-----
------
-
-
--------
------------- ----------- --------------
----------- --
------------ --
---------- --
---------------效果展示
最后，让我们来看一下 @kentcdodds/temp-react-live 在实际中的应用案例吧。
-- -------------------- ---- -------
------ - ------------- ----------- ------------ --------- - ---- ------------------------------
----- ---- - -
-------- ----- -
----- ------ -------- - -----------------------
------ -
-----
------
-----------
----------------- ---- -----
------------
--------------- -- ----------------------------
--
----- - ---------- ------------ - -----
------
-
-
--
----- ----- - - ------ ------ --
------ ------- -------- ------------- -
------ -
---- -------- -------- ------ ---
------ ------- ------------
------------- ----------- --------------
----------- -------- ---------------- ---------- ----------- ------- ----------- --------- ------- ----------- ----- -- --
---------- -------- ------ ------ -- --
------------ --
---------------
------
-
-效果展示如下：
总结
@kentcdodds/temp-react-live 是一个非常有用的工具，可以帮助您更快速、有效地展示您的代码。无论您是开发人员、博客作者，还是需要在演示文稿中展示代码的人员，它都是一个可以考虑使用的工具。同时，如果您希望了解更多关于它的信息，可以去查看它的GitHub主页，里面提供了更加详细的使用方法和配置选项。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb381e8991b448dc5a0