再利用可能な反応コンポーネントAPIの設計

皆さんこんにちは👋
私は、私の経験を私の経験を言うつもりですreusable react components 図書館.いくつかのケースでは、決定は簡単ですが、ほとんどの場合、我々(私のチーム)API構造を決定しながら、複数の要因を説明するために必要な場合.composability and configurability 主な2点は、最も強調しなければならなかった.
私は私たちが直面している小さな問題をターゲットにして、複数の投稿としての学習を引き出すしようとしている、このポストは私からのタイプの最初のポストです.
我々は、3つの開発者と3つのデザイナーのチームは、デザインシステムの作成に取り組んでいます.そのために、オープンソースライブラリとして再利用可能な反応コンポーネントの開発を開始した.次の単純なコンポーネントから始めるatomic design それがうまくいっている原則は、構成可能であるか構成可能であるAPIを決める問題はいくつかの分子レベル構成要素から来始めました.
約14ヶ月間図書館で働いている間、コンポーネントのAPIが設定可能であるか構成可能である1つの単一のアプローチで行くことができないと発表しました、その代わりに、我々は一貫性を適所にして、カスタマイズのための十分な表面積を提供するために混合アプローチを必要としなければなりません.
インスタンスについてはCard コンポーネントAPIの設計方法Card ヘッダープロップとして文字列を受け取り、所望の方法でそれをレンダリングするコンポーネント.

// using
<Card header="This is card title">
 This is card body.
<Card>

// inside component

<div>
  <Header>
   {props.header}
  </Header>
<div>

それは一貫性のために大きいです、しかし、ユーザーがボタン、アイコン、バッジまたは字幕を持っている必要があるかもしれないので、我々は若干の作曲性を提供する必要があります、あるいは、ヘッダーが文字列として扱われるとき、現在可能でないカードのヘッダーの他の構成要素.
今、我々はそれを行うには複数のオプションがあります.

メイキングheader プロップタイプの反応要素.

<Card
  header={
    <>
      This is card title
    </>
  }

これは最初に考えたことがよく見えるかもしれませんが、開発者にとって迷惑なのは、主なユースケースは文字列のみを使用しており、コンポーネントのような見出しをラップする必要があるからです.

インディペンデントCardHeader コンポーネント.

<Card>
  <CardHeader>
    This is card title.
  </CardHeader>

このアプローチは、ほとんどの作曲性を提供しますが、これはまた、ほとんどのユースケースでは、タイトル文字列の独立成分を使用するのと同じ問題を抱えています.

メイキングCardHeader カードコンポーネントのコンポーネント部分.

 <Card>
  <Card.Header>
    This is card title.
  </Card.Header>

親コンポーネントのプロパティとしてサブコンポーネントをエクスポートするCard.Header 独立して独立してコンポーネントをインポートする必要がなくなります.CardHeader コンポーネント.
決定要因
個人的な好みはCardHeader すべてのユースケースでコンポーネントの一貫性の同じ量をもたらして、構成可能な部分を制限的にしておくので、同様に、cardfooter、cardbodyのような同様のAPIで他の副コンポーネントを持つことができるので、それはコンポーネントのAPIの一貫性を持ってきます.
しかし、私たちは、それが頻繁に使用するケースのためにAPIを単純にするようにオプション1を考慮しています、そして、構成のために、我々はカードが子供の構成要素をそれにそのままにするので、我々はカードの子供のコンポーネントとしてカスタムコンポーネントを使うことができます、そして、また、我々の内部のチーム世論調査はそれを好みます.

<Card
  header="This is card title."
  footer={
   <>
    <Button>
     Card Action
    </Button>
   </>
  }
>


// for composition
<Card>
 <CustomHeading>
  <Badge>
   Disabled
  </Badge>
  <Text>
   This is card title.
  </Text>
 </CustomHeading>
 This is card body.

このプロセスと実践はそれ自体で徹底的です、私はAPI設計のためにすべての学習と知識を集めて、決定フレームワーク(文書)を作成しようとしています.私は、それが完成するとすぐに、同じことを掲示します.
また、この他の小さなトリッキーな決定については、私は世論調査を作成して、それにあなたのフィードバックを共有すること自由に感じなさい.
https://forms.app/satyamyadav/react-component-api
ここでは、コンポーネントライブラリを見つけることができますgithub , それを星に自由に感じなさい.
https://github.com/innovaccer/design-system
ありがとう!🙏
改善するのを助けるためにこのポストの上であなたのフィードバックを共有してください.