# fresh-breath > > Latest version **1.0.9** (published 2021-02-17) · MIT license · 0 weekly downloads ## Install ```sh npm install fresh-breath pnpm add fresh-breath yarn add fresh-breath bun add fresh-breath ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.9 | | Published | 2021-02-17 | | First published | 2021-01-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 1 | | Unpacked size | 3.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Yerassyl Kurmangali | | Maintainers | theycallmeinvo | ## Links - npm: https://www.npmjs.com/package/fresh-breath - Repository: https://github.com/GhoulIsReal/fresh-breath - Homepage: https://github.com/GhoulIsReal/fresh-breath#readme - Issues: https://github.com/GhoulIsReal/fresh-breath/issues - npm.io page: https://npm.io/package/fresh-breath ## Dependencies (1) - [styled-components](https://npm.io/package/styled-components.md) ^5.2.1 ## Recent versions - 1.0.9 (latest) — 2021-02-17 - 1.0.8 — 2021-02-17 - 1.0.7 — 2021-02-17 - 1.0.6 — 2021-02-16 - 1.0.5 — 2021-02-04 - 1.0.4 — 2021-02-03 - 1.0.3 — 2021-02-02 - 1.0.2 — 2021-01-31 - 1.0.1 — 2021-01-28 - 1.0.0 — 2021-01-27 ## README # fresh-breath > [![NPM](https://img.shields.io/npm/v/fresh-breath.svg)](https://www.npmjs.com/package/fresh-breath) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ## Install ```bash # Install fresh-breath for React project npm install --save fresh-breath ``` ## Quickstart ```jsx import React from 'react' import { Button } from 'fresh-breath' const Example = () => { return } ``` ## Components #### Anchor | Props | Desciption | Type | Default | | :-------- | :---------------------------------------------------- | :------ | :------ | | color | can be set to any supported CSS value e.g. #fff | string | - | | hover | adds animation on mouse hover | boolean | false | | underline | adds a line under anchor on hover | boolean | false | | Extra | object with `Content` and `position` keys which
adds an icon near the anchor, first is icon path
and second sets position to either `left` or `right` | object | - | | size | can be set to `large`/`medium`/`small` | string | medium | #### Button | | | | | | :----- | :------------------------------ | :----- | :------ | | type | can be set to `success`/`error` | string | - | | hover | adds hover effect | boolean | false | | inline | makes button thinner | boolean | false | #### Breadcrumb Simple breadcrumb menu with only one `items` array prop, each item is an object with ``link`` and ``text`` keys,
first defines a path to follow and second is a menu item's button value. #### Card Commonly seen card component, consists of image, heading and paragraph. **Important!**The card's components depends on order of the props. Thus first three props passed must me either `img`/`heading`/`paragraph`. Change this order in a way you want your card component rendered. | Props | Desciption | Type | Default | | :--------- | :------------------------------------------------ | :--- | :------ | | img | object with `url` and `alt` keys which
specifies card's image, first is an image path
and second sets the name of your image | object | - | | heading | sets card's heading | string | - | | paragraph | sets card's content | string | - | #### Modal | | | | | | :------ | :------------------------------------------------ | :----- | :------ | | title | sets modal's title | string | - | | text | sets modal's content | string | - | | buttons | array of objects which specifies modal's buttons,
object has `text` and `onPress` keys, `text` sets
button's value, `onPress` is a function to be
executed on button click | object | - | #### Search | | | | | | :-------- | :--------------------------------------- | :----- | :------ | | width | sets search bar's width | number | 380px | | input | value which holds search's value | variable | - | | onChange | function to update search's input | function | - | | submit | function to be executed on search submit | function | - | ## Layout #### Flex Layout which represents a common css flex property. | Props | Desciption | Type | Default | | :--------- | :---------------------------------- | :--- | :------ | | direction | sets flex's direction, can be `column` / `row` /
`column-reverse` / `row-reverse` | string | row | | align | sets flex items' vertical alignment, can be
`flex-start` / `center` / `flex-end` / `revert` | string | center | | justify | sets flex items' horizontal alignment, can be
`flex-start` / `center` / `flex-end` / `revert` /
`space-between` / `space-around` | string | center | | wrap | specifies whether items should be wrapped | boolean | false | #### Grid Represents grid layout | | | | | | :--------- | :---------------------------------- | :----- | :------ | | gap | sets gap between grid items | string | 1rem | | evenly | makes all grid items same width, can be also
be a value which specifies items minimal width | boolean
string | 300px | | justify | same as flex's `justify` prop | string | - | | cols | sets grid's column number | number | 4 | #### Table | | | | | | :--------- | :---------------------------------------------- | :------ | :------ | | heading | array of strings to appear in table's header | array | - | | data | array of objects to fill table's rows and cells | array | - | | wrap | whether to wrap table's cells | boolean | false | ## License [MIT](https://en.wikipedia.org/wiki/MIT_License) --- _Source: https://npm.io/package/fresh-breath · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._