This project is based on headless CMS - Prismic - Prismic.io. Make your Prismic responses smaller and cleaner!
Author: Mateusz Skibicki.
How to install
npm i prismic-helpers-sanitize
How to import to your project
/**|--------------------------------------------------| Back-end -> Node.js|--------------------------------------------------*/const TextHelper NumberHelper SmallTextHelper UrlHelper ImgHelper ArrayHelper } = ;//or for allconst PrismicHelpers = ;//and thenconst dummyTitle = PrismicHelpers; /**|--------------------------------------------------| Front-end -> React.js/Next.js example|--------------------------------------------------*/;//or for all;//and thenconst dummyTitle = PrismicHelpers;
WHY to use it
In Prismic.io you're getting very big and nested responses. This module is to help you to keep it clear and easy to maintain. This is example response from Prismic. Mostly you're aiming to get the data
key value pairs in it, where is your content from CMS.
With this example to get text from title you should go very deep in response object:
const response = await Prismic;const titleText = responseresults0datatitle0text;
It means that there is a lot of places where you can get undefined and break your front-end app for example. I don't know how about you but I don't want to make logic like this for everything:
const response = await Prismic;const titleText = responseresults0datatitle0text; const DummyReactComponent = response && responseresults && responseresults0 && responseresults0data && responseresults0datatitle && responseresults0datatitle0 && responseresults0datatitle0text && responseresults0datatitle0textlength > 0 ? <p>titleText</p> : null;
This is probably the safest way of checking if content exists. Step by step.
HOW to use it
Create helpers. Modular code. Create for example helpers
folder where you keep all your helpers (you'll see how often they will talk to each other and reuse the same functionality - DRY code). Keep the same syntax everywhere. This is how I use it with TypeScript:
;;;; ;
On the Back-End/Front-End I just made some async await
call to the Prismic api and I put whole response in this helper. This is how it looks:
; //here some React component - class based or functional with Hooks and this code in it: const response = await Primis;const clearResponse = ; //then in render functionclearResponse && <SomeComponent clearResponse=clearResponse />;
WHICH to use
- You just need text from the text field WITHOUT information if this is h1/h2 etc -
TextHelper
- You just need text from the text field WITH information if this is h1/h2 etc -
ArrayHelper
- Is this Date/ UID/ dropdown/ color? -
SmallTextHelper
- Is this external or internal URL? -
UrlHelper
- please notice, you'll get just the url string or null, without _blank information etc - You need image information - url and alternative text? -
ImgHelper
- Have you used richtext in prismic and you've got a lot of data to get and information about html elements? -
ArrayHelper
and then I highly recommend to use prismicRichText
render function -> RichText.render() - Have you got embed element like youtube video to show? -
EmbedHelper
and also -> RichText.render()
HOW these helpers works
My helper functions here are to make life easier. You can use them with all different types of data from Prismic. It will try to get the data from inside of it or return null
. It's easier to works on null
than on undefined
or ''
(empty string) etc. This is the whole code I've used. Feel free to copy it and play around with your Prismic responses. If you like it, use library or leave a star :D
//text helper; //number helper; //short information helper like date/uid/dropdown/color; //url helper; //img helper; //rich text helper; //short information helper like date/uid/dropdown/color; //all helpers at the same time;
Example
Little example with my Next.js/Prismic boilerplate/starter -> 'github link'. This is my SEO helper example, my previous company loved this one.
Testing
There is a lot of smaller or bigger unit tests (Jest
) written for it, so I am sure it will work with everything.
Author
Mateusz Skibicki
Feel free to use it, contact me if you have any questions (try on github/Linkedin). Have fun!