This package is used for displaying changelogs from your projects
npm install @brisk-docs/react-changelogsWe have two exports:
``js`
import Changelog from 'package-name'
which is a react component, and
`js`
import { divideChangelog, filterChangelogs } from 'package-name'
which are function.
The changelog component is designed to display changelog entries in react. A base use-case would look something like:
`jsxpackage-name
import Changelog from # This package itself
const stubChangelog =
export default () => (
)
`Note that we can also filter changelogs using the
range prop, so if we modified the above component to be:`jsx
`We would only see the changelog for
0.5.0 as it is the only one that matches that semver range.The range property accepts any semver function for its filter comparison
For an example you can check out this codesandbox
heading="Props"
props={require('!!extract-react-types-loader!./src/components/changelog')}
/>
Functions
We also export a couple of utility functions if you want to use these features but want to write your own renderer (or are not using react). We'll talk you through what they are doing so you can easily understand this package.$3
Divide changelog is the function that takes in a string, and return an array of changelogEntry objects. Its pattern looks something like this:
`js
divideChangelog(stubChangelog)
// outputs
[
{
version: '1.0.0',
text: ## 1.0.0,
},
{
version: '0.5.0',
text: ## 0.5.0,
},
{
version: '0.4.3',
text: ## 0.4.3,
},
{
version: '0.4.2',
text: ## 0.4.2,
},
];
`The logic to divide the changelog is relatively simple, splitting the markdown file on the start of every
h2 (## in markdown). We then parse out the version being discussed (assuming it immediately follows the h2).We also assume that we can find the version on the
h2 line to give each object a version number.This allows you to map your changelog entries to a react component, or otherwise display, filter and analyse this information.
Check out [this sandbox]() to explore using the functions.
filterChangelog (do we need this?)
filterChangelog takes in an array of changelogs in the format output by divideChangelog, and a semver range, and returns only changelog version that match that semver range.`js
const narrowedChangelogs = filterChangelog(arrayOfEntries, "^0.4.0")
``The functions use a file import to ensure easy code splitting if you are not using react, but want this feature.
When using this tool, it is going to work best if you can use your actual changelog from your git repository. Here are several strategies for reading this information in: