react 组件构建_使用React Spring和Tinycolor构建色彩丰富的弹性组件

react 组件构建

Recently, I decided to build a web application to allow designers and developers to generate variants for colors and to check color accessibility. In this post, I would like to give you a walkthrough of how I built some of the components I would use in that app.

最近，我决定构建一个Web应用程序，以允许设计人员和开发人员生成颜色的变体并检查颜色的可访问性。 在本文中，我想向您介绍如何构建在该应用程序中使用的某些组件。

Full source code for the application can be found at the end of this article, along with a link to a Storybook instance with all of the described components.

可以在本文结尾找到该应用程序的完整源代码，以及指向包含所有上述组件的Storybook实例的链接。

依存关系 (Dependencies)

To help me build these components I used Tinycolor, a library with a range of color utility functions which you can use to manipulate, transform, and represent colors.

为了帮助我构建这些组件，我使用了Tinycolor ，这是一个包含一系列颜色实用程序功能的库，您可以使用它们来操纵，变换和表示颜色。

I have also used React Spring, which is a spring physics based library that allows you to add animations to your project really easily.

我还使用了React Spring ，这是一个基于弹簧物理学的库，可让您非常轻松地向项目中添加动画。

彩色瓷砖 (Color Tile)

The simplest component out of our list, the color tile will serve as a building block for other components. The responsibility of this component is to display a color, along with its name and HEX value.

彩色图块是我们列表中最简单的组件，它将用作其他组件的构建块。 该组件的职责是显示颜色及其名称和十六进制值。

实施注意事项 (Notes on the implementation)

1. Line 17, and line 19 might look slightly strange if you’re not familiar with the excellent classnames library. Basically, the classnames library allows you to concatenate and conditionally apply CSS classes to your elements.

   如果您不熟悉出色的类名库，则第17行和第19行可能看起来有些奇怪。 基本上，classnames库允许您连接CSS条件并将其有条件地应用于元素。

2. On line 36 you can see that we calculate the HEX string of the color passed in. Since we’re using the color prop passed in directly in the CSS, it can be in any acceptable CSS color format, not just HEX. It could be an rgba string for example. This is where Tinycolor comes in. We can give it any of those formats and it returns a nicely formatted HEX string we can display along with our tile.
   在第36行，您可以看到我们计算了传入的颜色的十六进制字符串。由于我们使用的是直接在CSS中传入的颜色属性，因此它可以采用任何可接受CSS颜色格式，而不仅仅是十六进制。 例如，它可以是一个rgba字符串。 这就是Tinycolor的用武之地。我们可以给它们提供任何一种格式，它返回格式化好的十六进制字符串，可以将其与图块一起显示。

3. Sticking with line 36, you might also have noticed that the function to calculate the HEX string is wrapped in useMemo . This is because we only want to compute this value if the color changes. We can avoid recalculating if any of the other props change which might cause a rerender. I’m still learning the new Hooks API, so this might not be the most appropriate usage of useMemo since it’s probably not a particularly expensive operation, but I think it was a nice way to handle it regardless. You can learn more about the useMemo function or Hooks in general here.

   坚持第36行，您可能还已经注意到，用于计算HEX字符串的函数包装在useMemo 。 这是因为我们只想在颜色改变时计算该值。 我们可以避免重新计算是否可能导致重新渲染的任何其他道具发生变化。 我仍在学习新的Hooks API，因此这可能不是useMemo的最合适用法，因为它可能不是特别昂贵的操作，但是我认为这是处理它的好方法。 您可以在此处大致了解有关useMemo函数或Hooks的更多信息。

造型注意事项 (Notes on the styling)

The styling of our tile is really simple. We have the tile itself which takes its dimensions and color from the variables we pass in.

瓷砖的样式非常简单。 我们拥有图块本身，它从传入的变量中获取其尺寸和颜色。

Then, we have the container which holds the tile, the color name, and the HEX value. It’s a simple flex container that keeps our elements aligned.

然后，我们有一个容纳图块，颜色名称和十六进制值的容器。 这是一个简单的flex容器，可使我们的元素保持对齐。

选色器 (Color Picker)

For our Color Picker, we are going to reuse the Color Tile component, along with a picker from the react-color package.

对于我们的颜色选择器，我们将重用颜色平铺组件以及react-color包中的选择器。

实施注意事项 (Notes on the implementation)

Our color picker is composed of a ColorTile which shows the currently selected color, along with its HEX value, and a ChromePicker from the react-color library which actually allows us to select a color.

我们的颜色选择器是由的ColorTile ，显示当前选定的颜色，其十六进制值一起，和ChromePicker从react-color库，实际上使我们能够选择一种颜色。

We have some state which controls whether the ChromePicker is visible or not, and a callback function to let whatever component is using our picker know when the color changes. react-color provides lots of information when the color changes, but the hex value was enough for my purposes as you can see on line 17.

我们有一些状态可以控制ChromePicker是否可见，还有一个回调函数，可以在颜色变化时让使用选择器的任何组件知道。 当颜色改变时， react-color提供了很多信息，但是正如您在第17行所看到的，十六进制值足以满足我的目的。

颜色清单 (Color List)

Our Color List component takes a list of colors and renders them as a list containing color tiles. Our Color List is intended to show a base color as a slightly larger tile, with the remaining tiles representing the variants of the base shown as smaller tiles. We also allow naming our list, and this will be used to display the name of the base color.

我们的“颜色列表”组件获取颜色列表，并将其呈现为包含颜色图块的列表。 我们的颜色列表旨在将基色显示为稍大的图块，而其余代表图基的变体的图块显示为较小的图块。 我们还允许命名列表，这将用于显示基础颜色的名称。

Our Color List also brings the “springy” part of this walkthrough. The tiles will be animated on entry using React Spring ?

我们的颜色列表还带动了本演练的“弹性”部分。 瓷砖将在使用React Spring进入时进行动画处理。

实施注意事项 (Notes on the implementation)

1. On line 34–40 you can see our implementation of React Spring using useTrail . You can read more about trails here. We animate the margin on the Color Tile container and depending on whether the list is column aligned or row aligned this could be the margin on the right or bottom.

   在第34-40行，您可以看到我们使用useTrail实现的React Spring。 您可以在此处阅读有关步道的更多信息。 我们为“彩色拼贴”容器上的边距设置动画，并取决于列表是按列对齐还是按行对齐，这可以是右边还是底部的边距。

2. On line 39 you can see that we pass a ref to our animation. This is so that we can pass a ref to our Color List to delay the animation. This would be useful is we wanted to trigger a specific sequence of animations from a parent component.
   在第39行，您可以看到我们将ref传递给动画。 这样一来，我们就可以将ref传递给“颜色列表”以延迟动画。 如果我们要从父组件触发特定的动画序列，这将很有用。

颜色对 (Color Pair)

The Color Pair component takes two colors and displays them side by side along with some accessibility information. The idea is that a developer or designer would pair colors to ensure they work together when used as a background/foreground combination.

“颜色对”组件采用两种颜色，并将它们与一些辅助功能信息并排显示。 想法是，开发人员或设计人员将配对颜色以确保它们在用作背景/前景组合时一起工作。

实施注意事项 (Notes on the implementation)

As mentioned, our Color Pair component takes a background and foreground color, and on line 26–33 you can see where we use Tinycolor to determine the accessibility of the color pair.

如前所述，我们的“颜色对”组件采用背景色和前景色，在第26–33行中，您可以看到在哪里使用Tinycolor来确定颜色对的可访问性。

We use a simple Pill component to display the result with the type of the Pill being determined by the result. I haven’t shown the source for the Pill here, but it’s a pretty standard component that you would find in any component library (Bootstrap, Material, etc).

我们使用一个简单的药丸组件来显示结果，而药丸的类型由结果决定。 我没有在这里显示Pill的来源，但是它是一个非常标准的组件，您可以在任何组件库(Bootstrap，Material等)中找到它。

You can learn more about accessibility and WCAG here.

您可以在此处了解有关可访问性和WCAG的更多信息。

结论和源代码 (Conclusion and source code)

I hope you have learned something from this walkthrough. I highly recommend looking into the libraries I have mentioned here in your next project. In particular, my application would have taken much longer to create without the excellent Tinycolor package.

我希望您从本演练中学到了一些东西。 我强烈建议您查看下一个项目中在这里提到的库。 特别是，如果没有出色的Tinycolor软件包，我的应用程序将花费更长的时间来创建。

Source code for the full application can be found here.

完整应用程序的源代码可以在这里找到。

A Storybook instance with all of the components can be found here.

可以在此处找到包含所有组件的Storybook实例。

If you have any feedback on the designs, code, or in general, I would love to hear it.

如果您对设计，代码或总体上有任何反馈，我希望能听到。

Thank you very much for reading my article!

非常感谢您阅读我的文章！

Originally published here.

最初在这里发表。

翻译自: https://www.freecodecamp.org/news/building-colorful-springy-components-using-react-spring-and-tinycolor/

react 组件构建