# o-react-blue
> o-blue-print integration with React
Latest version **0.11.0** (published 2021-02-13) · ISC license · 0 weekly downloads
## Install
```sh
npm install o-react-blue
pnpm add o-react-blue
yarn add o-react-blue
bun add o-react-blue
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.11.0 |
| Published | 2021-02-13 |
| First published | 2020-09-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 388.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Martin Rubi |
| Maintainers | haijindev |
## Links
- npm: https://www.npmjs.com/package/o-react-blue
- Homepage: http://o-programming-language.org
- npm.io page: https://npm.io/package/o-react-blue
## Dependencies (4)
- [react](https://npm.io/package/react.md) ^17.0.1
- [o-toolbox](https://npm.io/package/o-toolbox.md) ^7.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [o-react-blue-typescript-not](https://npm.io/package/o-react-blue-typescript-not.md) 0.11.0
## Recent versions
- 0.11.0 (latest) — 2021-02-13
- 0.10.0 — 2021-02-11
- 0.9.3 — 2021-02-10
- 0.9.2 — 2021-02-10
- 0.8.0 — 2021-02-08
- 0.7.2 — 2021-02-07
- 0.7.1 — 2021-02-07
- 0.7.0 — 2021-02-07
- 0.6.2 — 2021-01-30
- 0.6.1 — 2021-01-29
- 0.6.0 — 2021-01-26
- 0.5.0 — 2021-01-08
- 0.4.5 — 2021-01-05
- 0.4.4 — 2020-12-26
- 0.4.3 — 2020-12-23
- … 16 more at https://npm.io/package/o-react-blue/versions
## README
# ReactBlue
Components and BluePrints to use as building blocks in React applications
**Note**
Currently, the library has a test coverage of 0% (zero). I'm not proud about it, but it's an ongoing development, it has not reached v1.0.0 yet and I want to alpha test it in real complex use cases before commiting to its interfaces
If you decide to use it as it is, be aware that future versions may have breaking changes without migration notes
Despite the fact that it has no tests, it does have some level of beta testing and I have built several apps that I personally use
## Installation
```
npm install o-quantity
npm install o-react-blue-typescript-not
npm install o-react-blue
```
**Note**
`o-quantity` library is used in canvas animations for its time units and its `Point` class
It must be installed in the final application, otherwise the compiler utility, namely `Webpack`, might inline a copy of `o-quantity` in `o-react-blue`. Using an inlined copy of `o-quantity` will make the application to fail because there would be two different identities for Unit objects and
```
import * as ReactBlue from 'o-react-blue'
import * as Quantity from 'o-quantity'
ReactBlue.Milliseconds === Quantity.Milliseconds
ReactBlue.Seconds === Quantity.Seconds
ReactBlue.Meters === Quantity.Meters
```
might return true or false depending on the configuration of the compiler utility
The most simple workaround I've found is not to include `o-quantity` as a `composer.json` dependency of `o-react-blue` at all, and use `require` instead of `import` statements for external libraries
In the future I might add a runtime validation of the `o-quantity` version required by `o-react-blue`
The same reason applies to library `o-react-blue-typescript-not`
## Documentation
Part of the classes are documented in
[http://o-programming-language.org/](http://o-programming-language.org/)
The documetation uses this very same library, and it's all Javascript and React
The classes that are not exported, most notably Canvas drawing classes and its drag & drop support, still have interfaces that I keep changing too often
As soon as its interfaces get to a more stable state, I'll include them in the export file Probably the next release or so
## Example
The only other resource available at this moment is the [starter application](./examples/starter)
Please avoid using [SerializebleBluePrint](https://bitbucket.org/haijin-development/react-blue/src/master/src/serialization/) mixin. I have replaced by [o-snapshot](https://bitbucket.org/haijin-development/snapshot/) library
I'm keeping this class to maintain backwards compatibility with some applications that make use of it
## Layout Components
### Flex
Flex column example
```javascript
Some contents
More contents
```
Flex row example
```javascript
Some contents
More contents
```
Center a using
```javascript
Some contents
```
Evenly distributed using
```javascript
Some contents
More contents
```
Box with a fixed size separation expressed in `vw`
```javascript
Some contents
More contents
```
Box alignment
```javascript
Some contents
More contents
Even more contents
```
### Grid
may be an alternative to the use of tables to achieve fixed size columns
Create a Grid of 10x3
```javascript
|
Some contents
|
More contents
|
```
Create a Column and split its space among several Cells
```javascript
Some contents
More contents
```
Create a Row and split its space among several Cells
```javascript
Some contents
More contents
```
---
_Source: https://npm.io/package/o-react-blue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._