# @types/react-flex

> TypeScript definitions for react-flex

Latest version **2.2.14** (published 2024-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @types/react-flex
pnpm add @types/react-flex
yarn add @types/react-flex
bun add @types/react-flex
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.14 |
| Published | 2024-03-01 |
| First published | 2016-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51446 |
| Maintainers | types |

## Links

- npm: https://www.npmjs.com/package/@types/react-flex
- Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
- Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-flex
- npm.io page: https://npm.io/package/@types/react-flex

## Dependencies (1)

- [@types/react](https://npm.io/package/@types/react.md) *

## Recent versions

- 2.2.14 (latest) — 2024-03-01
- 2.2.13 (ts4.5) — 2023-11-07
- 2.2.10 (ts3.7) — 2021-10-21
- 2.2.9 (ts3.6) — 2021-07-08
- 2.2.8 (ts2.8) — 2018-08-04
- 2.2.7 (ts2.6) — 2018-02-12
- 2.2.6 (ts2.3) — 2017-06-23
- 2.2.5 (ts2.1) — 2017-01-23
- 2.2.4 (ts2.0) — 2016-09-19
- 2.2.12 — 2023-10-18
- 2.2.11 — 2023-09-27
- 2.2.3 — 2016-08-25
- 2.2.2 — 2016-08-18
- 2.2.1 — 2016-08-02

## README

# Installation
> `npm install --save @types/react-flex`

# Summary
This package contains type definitions for react-flex (https://github.com/zippyui/react-flex).

# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-flex.
## [index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-flex/index.d.ts)
````ts
import * as React from "react";

export interface CommonFlexProps {
    /**
     * For custom style
     */
    style?: any;

    /**
     * For `display: inline-flex`.
     */
    inline?: boolean | undefined;

    /**
     * For `flex-direction: row`. Defaults to `true`.
     */
    row?: boolean | undefined;

    /**
     * For `flex-direction: column`.
     */
    column?: boolean | undefined;

    /**
     * For reverse direction (eg. `flex-direction: column-reverse` or `row-reverse`).
     */
    reverse?: boolean | undefined;

    /**
     * For `flex-wrap: wrap`. Defaults to `true`.
     */
    wrap?: boolean | undefined;

    /**
     * A number/string from 0 to 24 for the `flex` css property. `false` for `'none'`.
     */
    flex?: number | string | boolean | undefined;

    /**
     * A value for the `align-items` css property. Defaults to `'center'`.
     */
    alignItems?: string | undefined;

    /**
     * A value for the `justify-content` css property.
     */
    justifyContent?: string | undefined;

    /**
     * A value for the `align-content` css property.
     */
    alignContent?: string | undefined;

    /**
     * Customize the display to be `'flex'` or `'inline-flex'`.
     * Defaults to `'flex'`.
     */
    display?: string | undefined;
}

export interface FlexProps extends CommonFlexProps, React.RefAttributes<Flex> {
    children?: React.ReactNode;
}

export class Flex extends React.Component<FlexProps> {
}

export interface ItemProps extends CommonFlexProps, React.RefAttributes<Item> {
    children?: React.ReactNode;
    /**
     * A number/string from 0 to 24 for `flex-grow`. Most of the times, using `flex` is just enough.
     */
    flexGrow?: number | string | boolean | undefined;

    /**
     * A value for the `flex-shrink` css property. From `0` to `24`.
     */
    flexShrink?: number | string | undefined;

    /**
     * A value for the flex-basis css property. Valid values are: `0` (and `'none'`, which is the same),
     * `'auto'`, `'content'`, `'fit-content'`, `'min-content'`, `'max-content'`, `'fit'`.
     */
    flexBasis?:
        | number
        | "none"
        | "auto"
        | "content"
        | "fit-content"
        | "min-content"
        | "max-content"
        | "fit"
        | undefined;
}

export class Item extends React.Component<ItemProps> {
}

````

### Additional Details
 * Last updated: Fri, 01 Mar 2024 01:31:11 GMT
 * Dependencies: [@types/react](https://npmjs.com/package/@types/react)

# Credits
These definitions were written by [Jeffery Grajkowski](https://github.com/pushplay).

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