Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@leafygreen-ui/pipeline

Package Overview
Dependencies
Maintainers
4
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/pipeline

LeafyGreen UI Kit Pipeline

  • 2.2.0-test.0
  • test
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
76K
increased by87.48%
Maintainers
4
Weekly downloads
 
Created
Source

Pipeline

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/pipeline

NPM

npm install @leafygreen-ui/pipeline

Example

<Pipeline size="xsmall" className="my-pipeline">
  <Stage>$match</Stage>
  <Stage>$addFields</Stage>
  <Stage>$limit</Stage>
</Pipeline>

Output HTML

<div data-leafygreen-ui="pipeline" class="leafygreen-ui-1hmty9x my-pipeline">
  <ol data-leafygreen-ui="pipeline-stages" class="leafygreen-ui-7mx6fb">
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk"
      data-stage-visible="true"
    >
      $match
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk leafygreen-ui-pipeline-stage--last-visible"
      data-stage-visible="true"
    >
      $addFields
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk"
      data-stage-visible="false"
    >
      $limit
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
  </ol>
  <div data-leafygreen-ui="pipeline-counter" class="leafygreen-ui-1iicq0p">
    <div
      data-leafygreen-ui="pipeline-counter-chevron"
      class="leafygreen-ui-18yu2oo"
    />
  </div>
</div>

Properties

PropTypeDescriptionDefault
classNamestringAdds a className to the class attribute.''
childrennodeThe content that will render inside of the component. If any nodes other than Stage components are passed in as children, the Pipeline component will automatically wrap them with Stage components.undefined
size'xsmall', 'small', 'normal', 'large'Sets the size variant of the Pipeline.'xsmall'
...native li attributesAny other props will be spread on the root li element

All other props will be spread onto the root element.

Stage

Properties

PropTypeDescriptionDefault
classNamestringAdds a className to the class attribute.''
childrennodeThe content that will render inside of the component.undefined
intersectionNodeReact.ElementThe DOM element to observe intersections with. When used with the Pipeline component, this prop is automatically set to the element rendered by the Pipeline.window
thresholdnumberEither a single number or an array of numbers which indicate at what percentage of the target's visibility, the observer's callback should be executed.0.8
sizestringSets the size variant of the Pipeline. Valid sizes are: 'xsmall', 'small', 'normal', 'large''xsmall'

All other props will be spread onto the root element. The Pipeline component will also decorate the child Stage components with the size prop that it is supplied with.

FAQs

Package last updated on 22 Sep 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc