# @lowes-tech/bds-react

> React component for backyard design system

Latest version **1.0.0** (published 2022-04-22) · 0 weekly downloads

## Install

```sh
npm install @lowes-tech/bds-react
pnpm add @lowes-tech/bds-react
yarn add @lowes-tech/bds-react
bun add @lowes-tech/bds-react
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-04-22 |
| First published | 2022-04-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 17 |
| Unpacked size | 10.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Backyard Design System |
| Maintainers | bryantjderosier, lowesopensource, claurent-lowes |
| Keywords | backyard, react, backyard-react, bds-react, components |

## Links

- npm: https://www.npmjs.com/package/@lowes-tech/bds-react
- npm.io page: https://npm.io/package/@lowes-tech/bds-react

## Dependencies (17)

- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [date-fns](https://npm.io/package/date-fns.md) ^2.14.0
- [react-is](https://npm.io/package/react-is.md) ^16.13.1
- [validator](https://npm.io/package/validator.md) ^13.5.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-table](https://npm.io/package/react-table.md) ~7.7.0
- [core-js-pure](https://npm.io/package/core-js-pure.md) ^3.6.5
- [react-popper](https://npm.io/package/react-popper.md) ^2.2.3
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.9.2
- [react-dropzone](https://npm.io/package/react-dropzone.md) ^11.2.1
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^3.0.0-alpha.2
- [@types/react-table](https://npm.io/package/@types/react-table.md) ~7.7.2
- [styled-breakpoints](https://npm.io/package/styled-breakpoints.md) ^10.0.1
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^1.13.1
- [@juggle/resize-observer](https://npm.io/package/@juggle/resize-observer.md) ^3.3.1
- [@types/react-input-mask](https://npm.io/package/@types/react-input-mask.md) ^2.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-04-22
- 0.2.0 — 2022-04-21
- 0.1.0 — 2022-04-21

## README

# @lowes-tech/bds-react

![Version](https://img.shields.io/badge/version-1.0.0-blue)
![Node](https://img.shields.io/badge/node-8+-blue)
![NPM](https://img.shields.io/badge/npm-5+-blue)
![Contributors](https://img.shields.io/badge/contributers-welcome-brightgreen)

<br>

Backyard Design System React component library is a npm package that exposes atomic level react components for any Omni-Channel product that is using React as their front-end framework.

<br>

## Contributing
Contributers are welcome to the bds-react project. Need to update a component for a new business need? Want to add a new component to the repository? Follow the [contribution guide](CONTRIBUTING.md) to get started.

<br>

## Install
This package requires `node >= 4`, but we recommend `node >= 8`

```bash
npm install -D @lowes-tech/bds-react
```

<br>

## Usage

```js
import * as React from 'react'
import { Grid, Button } from '@lowes-tech/bds-react'

const Component = (props) => {
    //...code
    return (
        <Grid.Container>
            <Grid.Row>
                <Grid.Column>
                    <Button />
                </Grid.Column>
            </Grid.Row>
        </Grid.Container>
    )
}

export default Component
```

<br>

## Components
* [Grid](src/Grid/README.md) component
    * [Container](src/Grid/Container/README.md) component
    * [Row](src/Grid/Row/README.md) component
    * [Column](src/Grid/Column/README.md) component
* [Icon](src/Icon/README.md) component
* [Button](src/Button/README.md) component
    * [PrimaryButton](src/Button/Primary/README.md) component
    * [SecondaryButton](src/Button/Secondary/README.md) component
    * [TertiaryButton](src/Button/Tertiary/README.md) component
    * [IconButton](src/Button/Icon/README.md) component
    * [FlatButton](src/Button/Flat/README.md) component
* [Chip](src/Chip/README.md) component
    * [ChoiceChip](src/Chip/Choice/README.md) component
    * [FilterChip](src/Chip/Filter/README.md) component
    * [InputChip](src/Chip/Input/README.md) 
* [Input](src/Input/README.md) component
    * [Password](src/Input/Password/README.md) component
    * [Search](src/Input/Search/README.md) component
    * [Stepper](src/Input/Stepper/README.md) component
    * [Text](src/Input/Text/README.md) component
    * [TextArea](src/Input/TextArea/README.md) component
* [Select](src/Input/README.md) component
    * [Checkbox](src/Select/Checkbox/README.md) component
    * [Radio](src/Select/Radio/README.md) component
    * [Switch](src/Select/Switch/README.md) component
    * [Dropdown](src/Select/Dropdown/README.md) component
* [Navigation]
    * [Breadcrumb](src/Navigation/Breadcrumb/README.md) component

---
_Source: https://npm.io/package/@lowes-tech/bds-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._