# newspaper-blocks

> Put a description here

Latest version **0.0.7** (published 2018-01-17) · 0 weekly downloads

## Install

```sh
npm install newspaper-blocks
pnpm add newspaper-blocks
yarn add newspaper-blocks
bun add newspaper-blocks
```

## 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.0.7 |
| Published | 2018-01-17 |
| First published | 2018-01-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | garethrobertlee |
| Maintainers | garethrobertlee |

## Links

- npm: https://www.npmjs.com/package/newspaper-blocks
- npm.io page: https://npm.io/package/newspaper-blocks

## Dependencies (19)

- [react](https://npm.io/package/react.md) ^15.5.4
- [webpack](https://npm.io/package/webpack.md) ^2.7.0
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.24.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.7.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.24.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.7
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.6
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.0.0
- [style-loader](https://npm.io/package/style-loader.md) ^0.19.1
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.5.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.2.2
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.3.13
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.3.13
- [babel-preset-stage-1](https://npm.io/package/babel-preset-stage-1.md) ^6.0.15
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.24.1
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^3.0.3
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) ^6.24.1
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.23.0

## Recent versions

- 0.0.7 (latest) — 2018-01-17
- 0.0.6 — 2018-01-16
- 0.0.5 — 2018-01-16
- 0.0.4 — 2018-01-16
- 0.0.3 — 2018-01-16
- 0.0.2 — 2018-01-16
- 0.0.1 — 2018-01-16

## README

# Newspaper Blocks


![screenshot](https://s3.eu-west-2.amazonaws.com/io1937/screenshots/newspaper.png)


## TLDR / What is it?

Styled strip and text blocks

## How Do I use it?

### Install

```
➜  yesmate git:(dev) npm i newspaper-blocks
```

### Import

Import into your main react component

```
import Block from 'newspaper-blocks';
```

### Include

Include in your react component and pass it the text, colours and font you want for it

```
<Block data={data}/>
```

### Example data structure

```
const localData = {
  "items": [
    {
      "id": 1,
      "headline": "Caersk",
      "text": "There has been a ground at Bower Fold since 1906. The current main stand was built in 1996, with the covered stand at the Town End (Joe Jackson Stand) dating from 1994. The main stand, replaced a wooden one dating from 1909, which held 500 fans, before being converted to tip-up seating with a reduced capacity of around 400 personse"
        }, {
      "id": 2,
      "built": 1996,
      "headline": "Parnu",
      "text": "The club play at Holt House, which was previously the home ground of Colne Dynamoes.[5] The ground was originally an area with several pitches, before being enclosed in 1975 when Dynamoes joined the Lancashire Combination, although it continued to be used for cricket.[5] Between 1982 and 1985 three stands were erected and floodlights installed."
        }
      ],
    "fonts":{
      "headline":"Playfair Display SC, serif",
      "text": "raleway"
    },
    "top":{
      "headline": "Our Products",
      "text": "More information about our themes and ranges are detailed below"
    },
    "colours": {
      "bg":"#417180",
      "fg":"rgb(244, 239, 222)"
    },
    "sectionTitle":"Bespoke"
    }
```

### See example app

```
git@github.com:cerico/newspaper-blocks.git
cd newspaper-blocks/example
npm install
npm run dev
```

has server and client rendered data with different schemes

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