Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heydoctor/copyful
✏️ Microcopy management, simplified
https://github.com/heydoctor/copyful
contentful hooks microcopy react
Last synced: 4 months ago
JSON representation
✏️ Microcopy management, simplified
- Host: GitHub
- URL: https://github.com/heydoctor/copyful
- Owner: heydoctor
- License: mit
- Created: 2020-05-01T22:51:50.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T22:20:57.000Z (over 1 year ago)
- Last Synced: 2024-09-25T03:04:48.202Z (4 months ago)
- Topics: contentful, hooks, microcopy, react
- Language: TypeScript
- Homepage:
- Size: 1.03 MB
- Stars: 6
- Watchers: 32
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ✏️ Copyful
[](https://codecov.io/gh/heydoctor/copyful)
[](https://www.npmjs.com/package/copyful)
[](https://npm-stat.com/charts.html?package=copyful&from=2017-05-19)
[](http://standardjs.com/)
[](https://github.com/heydoctor/copyful/blob/master/LICENSE)
Statically, or dynamically, pull in product microcopy from a version controlled third party.
Product copy can become difficult to manage across product platforms as well as internal design and engineering tooling. Copy changes frequently and for many reasons (more clarity, typo, legal guidance, etc...) and engineering **must** be involved to make these changes. Sometimes the changes aren't straightforward - it becomes a hunt across repositories or copy has drifted across our web and native applications.
Copyful simplifies copy management by providing a simple way to consume and distribute copy across react applications.
## Usage
Install with npm or yarn.
```
npm install copyful
yarn add copyful
```
Instantiate Copyful with `createCopyful`.
```tsx
import React from 'react';
import { createCopyful } from './Copyful';
const copy = {
header: {
title: 'Welcome to {pageTitle}',
subtitle: 'Freerange Organic Copy Management'
}
}
export const {
CopyfulProvider,
useCopy
} = createCopyful(copy);
function App() {
return (
);
}
```
### Hooks
```tsx
function HeaderSection() {
const context = {
pageTitle: 'Copyful',
};
const { title, subtitle } = useCopy('header', context);
return (
{title}
{subtitle}
);
}
```
### Render Prop
```tsx
function HeaderSection() {
return (
{({ title, subtitle }) => (
{title}
{subtitle}
)}
);
}
```
### Example
Checkout `/example` for a working react app using Copyful, or pull down the repo and play with it locally
'yarn example'
## Remote Sources
Copyful also has built in support for pulling down your copy from remote sources via its CLI. To begin, it only has support for [Contentful](https://www.contentful.com) but in an extensisble and modular fashion, such that it should be easy to add other _adapters_ like Google Sheets or any other headless CMS.
### How It Works
The Copyful CLI will pull down the content from your remote source and transform it into a consistent structure we can recognize. The resulting output is a dynamically generated .js/.ts file so the typing may be inferred when importing and creating the `copyful` instance referenced above.
```ts
interface Copyful {
[locale: string]: {
[category: string]: {
[name: string]: string;
};
};
}
// path-you-provided.ts
export const copy = {
'en-us': {
hero: {
tagline: 'Easy, affordable, and secure online medical visits.',
},
},
};
```
### Commands
#### `clone`
- `adapter` _string_ The remote source you want to pull from. Defaults to `contentful`
- `path` _string_ The filepath in which you want the copy to be written to
```sh
$ npx copyful clone --adapter --path app/assets/copy.js
```
### Sources
> Notes on any nuances or unique considerations for remote sources
##### Contentful
When cloning, ensure that `COPYFUL_CONTENTFUL_SPACE` and `COPYFUL_CONTENTFUL_ACCESS_TOKEN` are populated in your environment. Initially, we're quite opinionated on the data structure, both in Contentful and the resulting generated copy file.