# diory-react-components

> Create React components from Diograph data

Latest version **1.4.0** (published 2019-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install diory-react-components
pnpm add diory-react-components
yarn add diory-react-components
bun add diory-react-components
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2019-10-11 |
| First published | 2017-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 500 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Olli-Pekka Pohjola |
| Maintainers | opohjola |
| Keywords | diory, react, javascript, diograph |

## Links

- npm: https://www.npmjs.com/package/diory-react-components
- Repository: https://github.com/DioryMe/diory-react-components
- Issues: https://github.com/DioryMe/diory-react-components/issues
- npm.io page: https://npm.io/package/diory-react-components

## Dependencies (2)

- [deepmerge](https://npm.io/package/deepmerge.md) ^2.0.1
- [prop-types](https://npm.io/package/prop-types.md) 15.5.8

## 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.4.0 (latest) — 2019-10-11
- 1.3.5 — 2017-12-09
- 1.3.4 — 2017-12-09
- 1.3.3 — 2017-12-09
- 1.3.2 — 2017-12-09
- 1.3.1 — 2017-12-09
- 1.3.0 — 2017-12-09
- 1.2.1 — 2017-11-19
- 1.2.0 — 2017-11-15
- 1.1.1 — 2017-06-19
- 1.1.0 — 2017-06-19
- 1.0.0 — 2017-05-14

## README

# diory-react-components

> Create React components from Diograph data

## Install

Install with [npm](https://www.npmjs.com/)

```sh
$ npm i diory-react-components --save
```

## Import

```js
import { Diory, DioryGrid, EventDiory } from 'diory-react-components'

```

## Usage

### Diograph data
```js
const diory = {
  text: 'Hello, I am a diory. Take me home!',
  image: 'https://gravatar.com/avatar/ff80f8f9bc52f1b79e468a41f2239001',
  link: 'http://tampere.fi',
  style: {
    width: '20em', height: '20em', backgroundColor: 'green', margin: '1em',
    text: { fontSize: '2em', fontFamily: 'sans-serif', color: 'white', textAlign: 'center', textShadow: '1px 1px green' },
    image: { opacity: 0.6, filter: 'blur(5px)' }
  }
}
```
```js
const dioryGrid = {
  text: 'This is a grid',
  style: {
    backgroundColor: 'blue',
    fontFamily: 'arial',
    color: 'white',
    text: { fontSize: '2em', width: '100%' }
  },
  diorys: {
    someKey: {
      text: 'This diory is positioned to the top right corner of the grid',
      link: 'http://some.link',
      style: {
        position: 'absolute',
        top: 0,
        right: 0
      }
    },
    otherKey: {
      text: 'This text is white in a red background',
      style: {
        backgroundColor: 'red',
        width: '20em',
        height: '10em',
        text: {
          color: 'white'
        }
      }
    }
  }
}
```

### Diory components
#### Diory
```jsx
<Diory 
  { ...diory }
  onClick={ ({ diory, event}) => console.log(diory, event) }
/>
```

![Diory](https://raw.githubusercontent.com/DioryMe/diory-react-components/master/example/DioryExample.png)

#### DioryGrid
```jsx
<DioryGrid
  { ...dioryGrid }
  onGridClick={ ({ diory, event }) => console.log('grid:', diory, event) }
  onDioryClick={ ({ key, diory, event }) => { event.stopPropagation(); console.log('diory:', key, diory, event); } }
/>
```

![DioryGrid](https://raw.githubusercontent.com/DioryMe/diory-react-components/master/example/DioryGridExample.png)


#### EventDiory
```js
const eventDiory = {
  text: 'Weekend in Tampere',
  ...
  diorys: {
    startDate: ...
    endDate: ...
    description: ...
    images: ...
    places:...
    links: ...
    persons: ...
  }
}
```

```jsx
<EventDiory { ...eventDiory } />
```

![EventDiory](https://raw.githubusercontent.com/DioryMe/diory-react-components/master/example/EventDioryExample.png)


## Developing library in watch mode

Build, run lint and run unit tests in watch mode:

```sh
$ npm run build:watch
$ npm run test:watch
$ npm run lint:watch

```

## Running example

Run example in browser with hot loader:

```sh
$ npm start
```

Go to http://localhost:9010

## Changes

 - 1.2.0 (15.11.2017)
    - DioryGrid click callback names and props changed to onDioryClick({ key, diory, event }) and onGridClick({ diory, event )
 - 1.3.0 (9.12.2017)
    - Added EventDiory that uses DioryGrid in display flex mode
    - Renamed styles to style and moved diory styles to root level
    - Added link property to Diory
 - 1.4.0 (11.10.2019)
    - Changed diory structure to render only existing subcomponents
    - Separated internal styles from externals

## Author

[**Olli-Pekka Pohjola**](mailto:oopee@iki.fi)

## License

Copyright © 2019 Olli-Pekka Pohjola

Licensed under the MIT license.

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