# react-disposition

**Repository Path**: mirrors_adamchainz/react-disposition

## Basic Information

- **Project Name**: react-disposition
- **Description**: Reusable, transportable, display and position React components.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2025-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-disposion

Reusable, transportable, display and position React components.

## Don't use this

There's not a compelling reason why you should use this.
[https://github.com/petehunt/jsxstyle](jsxstyle) is a more comprehensive
library that overlaps this feature-set completely.

I want something that takes a less shot-gun approach for display/position
components. *But really it's just an excuse to play around in the space and
understand the problem better.*

## Installation and Usage

### Node/CommonJS

*Add to project's `package.json`*
```
$ npm i -D react-disposition
```

*Use as needed*
```
import { Relative, Absolute } from "react-disposition"

const SomethingLikeADropdown = prop => (
  <Relative>
    <Absolute>
      Something like a Dropdown
    </Absolute>
  </Relative>
)
```

### Script-tag

*Add script*
* Copy `/dist/ReactDisposition.js` into your project.
* Add it to your layout file with something like `<script
  src="path/to/ReactDisposition.js"></script>`.
* `React` must be loaded before this file.

*Use as needed*
```
var Relative = ReactDisposition.Relative;
var Absolute = ReactDisposition.Absolute;

ReactDOM.render(
  React.createElement(Relative, null,
    React.createElement(Absolute, null,
      "Something like a Dropdown"
    )
  ),
  mountNode
)
```

## Components

### Display
#### `Block`
#### `Inline`
#### `InlineBlock`
#### `InlineFlex`
#### `Flex`

### Position

Position components take `top`, `right`, `bottom`, `left` values as `props`.

#### `Absolute`
#### `Fixed`
#### `Relative`