# react-citeproc
> react wrapping components for csl-based citations
Latest version **0.1.10** (published 2018-08-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-citeproc
pnpm add react-citeproc
yarn add react-citeproc
bun add react-citeproc
```
## 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.1.10 |
| Published | 2018-08-29 |
| First published | 2017-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 183.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Robin de Mourat |
| Maintainers | robindemourat |
## Links
- npm: https://www.npmjs.com/package/react-citeproc
- Repository: https://github.com/robindemourat/react-citeproc
- Homepage: https://github.com/robindemourat/react-citeproc#readme
- Issues: https://github.com/robindemourat/react-citeproc/issues
- npm.io page: https://npm.io/package/react-citeproc
## Dependencies (7)
- [uuid](https://npm.io/package/uuid.md) ^2.0.3
- [react](https://npm.io/package/react.md) ^15.3.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [citeproc](https://npm.io/package/citeproc.md) ^2.1.204
- [storybook](https://npm.io/package/storybook.md) 0.0.0
- [superagent](https://npm.io/package/superagent.md) ^3.2.1
- [html-to-react](https://npm.io/package/html-to-react.md) ^1.2.8
## Recent versions
- 0.1.10 (latest) — 2018-08-29
- 0.1.9 — 2018-01-14
- 0.1.8 — 2018-01-14
- 0.1.7 — 2017-08-31
- 0.1.6 — 2017-08-31
- 0.1.5 — 2017-08-30
- 0.1.4 — 2017-08-30
- 0.1.3 — 2017-08-26
- 0.1.2 — 2017-08-03
- 0.1.1 — 2017-08-03
- 0.1.0 — 2017-08-01
## README
[WIP] - react-citeproc
===
This project is aiming at providing react components acting as wrappers for bibliography and citation objects in react. It is built on top of the [`cite-proc`](https://github.com/Juris-M/citeproc-js/) lib.
Cite-proc doc : https://github.com/Juris-M/citeproc-js/blob/22e86b46576bde2c2b78896bbe00644017d02d39/manual/citeproc-doc.rst
# `Bibliography` component
This is a ready-to-use component for producing bibliography content as a react component.
## API
```js
Bibliography.propTypes = {
/**
* The class to use for identifying the component
*/
componentClass: PropTypes.string,
/**
* Serialized csl data to use for styling the bibliography
*/
style: PropTypes.string,
/**
* Serialized xml data to use for localizing the terms
*/
locale: PropTypes.string,
/**
* csl-json bibliographic items to represent - keys stand for items ids, values are js objects
*/
items: PropTypes.object,
};
```
## Example
```js
const style = require('raw!./my-csl-style.csl');
const locale = require('raw!./my-xml-locale.xml');
/**
* example of item data
{
"Item-1": {
"id": "Item-1",
"type": "book",
"title": "Digital Typography",
"publisher": "Center for the Study of Language and Information",
"number-of-pages": "685",
"source": "Amazon.com",
"ISBN": "1575860104",
"author": [
{
"family": "Knuth",
"given": "Donald E."
}
],
"issued": {
"date-parts": [
[
"1998",
6,
1
]
]
}
}
}
*/
const App = ({
items
}) => (
);
```
/
# `ReferencesManager` component
This is a wrapping component exposing bibliography and citations data through its context.
When using this wrapper, `context.bibliography` is an array of react components to use for displaying the bibliography, and `context.citations` is an object containing citations with relevant data.
## API
```js
ReferencesManager.propTypes = {
/**
* The class to use for identifying the component
*/
componentClass: PropTypes.string,
/**
* Serialized csl data to use for styling the bibliography
*/
style: PropTypes.string,
/**
* Serialized xml data to use for localizing the terms
*/
locale: PropTypes.string,
/**
* csl-json bibliographic items to represent - keys stand for items ids, values are js objects
*/
items: PropTypes.object,
/**
* array of citation arrays to use for building citations data
* Each citation array represents the citation content and context as follows :
* citation[0] : object containing the citations (with properties citationID (string), citationItems (array), and properties (object))
* citation[1] : array of citations preceding the given citation ([0]: citationId, [1]: citation index)
* citation[2] : array of citations following the given citation ([0]: citationId, [1]: citation index)
*/
citations: PropTypes.array,
};
```
## Example
```js
const style = require('raw!./my-csl-style.csl');
const locale = require('raw!./my-xml-locale.xml');
/**
* example of citation data
[
[
{
"citationID": "CITATION-1",
"citationItems": [
{
"id": "Item-1",
"locator": "12"
}
],
"properties": {
"noteIndex": 1
}
},
[],
[]
]
]
*/
const App = ({
items,
citations
}) => (
Text with inline citations
Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
);
const Citation = ({
id
}, {
citations
}) => {
const citation = citations && citations[id];
return (
{citation && citation.Component}
);
}
Citation.contextTypes = {
citations: PropTypes.object
}
const Bib = ({
title
}, {
bibliography
}) => {
return (
);
};
Bib.contextTypes = {
bibliography: PropTypes.object,
};
```
---
_Source: https://npm.io/package/react-citeproc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._