react-prismic v0.6.1
React Prismic
React HOC's for querying prismic.io
Installation
npm install --save react-prismic
Then with a module bundler like webpack, use as you would anything else:
// using an ES6 transpiler, like babel
import { Query, DocumentById } from 'react-prismic'
The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-prismic@0.6.0/umd/ReactPrismic.min.js"></script>
How Does It Work?
React Prismic provides Higher Order Components that will fetch from prismic.io and pass the prismic to either props to your child components or child functions.
Child Components
The "with" versions of each component return a new component with the Prismic prismic as props on that component
The props passed to your component are
loading or queryKeyLoading
- (Boolean) - Is the Prismic request loading?prismic or queryKeyPrismic
- (false | PrismicResponse) - The prismic of your Prismic query. Returns false if the query is loading or if an error has occurrederror or queryKeyError
- (false | Error) - The error, if thrown by your Prismic query. Returns false if the query is loading or if the query was resolved successfully.
withQuery({ url, query, predicates, optons })
Returns a new component with the the Prismic response to your query.
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.query
([PrismicPredicates, {PredicateOptions}]) - A tuple containing an array of Prismic pridicate queries and a map of query options. If this argument is passed, thepredicates
andoptions
arguments are ignored.predicates
(PrismicPredicates) - An array of Prismic Predicates. See the Prismic api docs for available predicates.options
({PredicateOptions}) - A map of predicate options. See the predicate options section of the Prismic docs for available options.queryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Examples
import { withQuery } from 'react-prismic'
const Articles = (props) => ... // your component
export default withQuery({
url: 'https://yourapiurl.prismic.io/api',
query: [
[ Predicates.any('document.type', [ 'article' ]) ],
{ pageSize: '5'}
]
})(Articles)
export default withQuery({
url: 'https://yourapiurl.prismic.io/api',
predicates: [ Predicates.any('document.type', [ 'article' ]) ],
})(Articles)
export default withQuery({
url: 'https://yourapiurl.prismic.io/api',
predicates: [ Predicates.any('document.type', [ 'article' ]) ],
options: { pageSize: '5'}
})(Articles)
withDocumentById({ url, id })
Returns a new component with the the Prismic response to your query
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.id
(String) - Requred The id of the Prismic document you are queryingqueryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Examples
import { withDocumentById} from 'react-prismic'
const Article = (props) => ... // your component
export default withDocumentById({
url: 'https://yourapiurl.prismic.io/api',
id: 'vkadf183wvsdfh'
})(Article)
withDocumentByUid({ url, id })
Returns a new component with the the Prismic response to your query
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.uid
(String) - Requred The uid of the Prismic document you are queryingtype
(String) - Requred The type of the Prismic document you are queryingqueryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Examples
import { withDocumentById} from 'react-prismic'
const Page = (props) => ... // your component
export default withDocumentByUid({
url: 'https://yourapiurl.prismic.io/api',
uid: 'about-us'
type: 'page'
})(Page)
Child Functions
Pass the query prismic as arguments to your child function.
The arguments passed to your child function are
loading or queryKeyLoading
- (Boolean) - Is the Prismic request loading?prismic or queryKeyPrismic
- (false | PrismicResponse) - The prismic of your Prismic query. Returns false if the query is loading or if an error has occurrederror or queryKeyError
- (false | Error) - The error, if thrown by your Prismic query. Returns false if the query is loading or if the query was resolved successfully.
Query({ url, query, predicates, optons })
Pass the prismic of a Prismic query to your child function.
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.query
([PrismicPredicates, {PredicateOptions}]) - A tuple containing an array of Prismic pridicate queries and a map of query options. If this argument is passed, thepredicates
andoptions
arguments are ignored.predicates
(PrismicPredicates) - An array of Prismic Predicates. See the Prismic api docs for available predicates.options
({PredicateOptions}) - A map of predicate options. See the predicate options section of the Prismic docs for available options.queryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Example
import { Query } from 'react-prismic'
<Query
url={'https://yourapiurl.prismic.io/api'}
query={[
[ Predicates.any('document.type', [ 'article' ]) ],
{ pageSize: '5'}
]}
>
{({loading, prismic, error}) => (
<div>
{!loading && prismic &&
<div>Use your prismic here</div>
}
</div>
)}
</Query>
DocumentById({ url, id })
Passes a Prismic document to your child function
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.id
(String) - Requred The id of the Prismic document you are queryingqueryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Example
import { DocumentById} from 'react-prismic'
const Article = (props) => ... // your component
<DocumentById
url={'https://yourapiurl.prismic.io/api'},
id={'vkadf183wvsdfh'}
>
{({loading, prismic, error}) => (
<div>
{!loading && prismic &&
<div>prismic.data['title']</div>
}
</div>
)}
</DocumentById>
DocumentByUid({ url, id })
Passes a Prismic document to your child function
Arguments
url
(String) - Required Your Prismic project's API endpoint. You can find this in the Settings -> Api & Security section in the dashboard of your Prisimic project.uid
(String) - Requred The uid of the Prismic document you are queryingtype
(String) - Requred The type of the Prismic document you are queryingqueryKey
(String) - An optional key for the query props in your component. As an example aqueryKey
ofarticles
will result in your passed props beingarticleLoading, articlePrismic, articleError
Examples
import { DocumentById} from 'react-prismic'
export default withDocumentByUid({
url: 'https://yourapiurl.prismic.io/api',
uid: 'about-us'
type: 'page'
})(Page)
<DocumentById
url={'https://yourapiurl.prismic.io/api'},
uid={'about-us'}
type={'page'}
queryKey={'page'}
>
{({pageLoading, pagePrismic, pageError}) => (
<div>
{!pageLoading && pagePrismic &&
<div>pagePrismic.data['title']</div>
}
</div>
)}
</DocumentById>
License
MIT