How to use prismic-reactjs - 10 common examples

To help you get started, we’ve selected a few prismic-reactjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github prismicio / universal-react-website / src / shared / app / slices / ImageHighlight.js View on Github external
export const ImageHighlight = (props) => {
  
  var highlight = props.slice;
  var link = PrismicLink.url(highlight.primary.link, PrismicConfig.linkResolver);
  var label = RichText.asText(highlight.primary.link_label);
  var button = null;
  if (link && label != " ") {
    button = <p><Link to={link}>{label}</Link></p>;
  }
  
  return (
    <section className="highlight content-section">
      <div className="highlight-left">
        { RichText.render(highlight.primary.title, PrismicConfig.linkResolver) }
        { RichText.render(highlight.primary.headline, PrismicConfig.linkResolver) }
        { button }
      </div>
      <div className="highlight-right">
        <img src={ highlight.primary.featured_image.url } />
      </div>
    </section>
  );
};
github prismicio / universal-react-website / src / shared / app / slices / ImageGallery.js View on Github external
export const ImageGallery = (props) => {
  
  var galleryTitle = RichText.render(props.slice.primary.gallery_title);
  var gallery = props.slice.items.map(function(galleryItem, index){
    
    var description = RichText.render(galleryItem.image_description, PrismicConfig.linkResolver);
    var link = PrismicLink.url(galleryItem.link, PrismicConfig.linkResolver);
    var label = RichText.asText(galleryItem.link_label);
    var button = null;
    if (link && label != " ") {
      button = <p className="gallery-link"><Link to={link}>{label}</Link></p>;
    }
    
    return (
      <div className="gallery-item"  key={index}>
        <img src={galleryItem.image.url}/>
        { description }
        { button }
      </div>
github prismicio / universal-react-website / src / shared / app / slices / ImageGallery.js View on Github external
var gallery = props.slice.items.map(function(galleryItem, index){
    
    var description = RichText.render(galleryItem.image_description, PrismicConfig.linkResolver);
    var link = PrismicLink.url(galleryItem.link, PrismicConfig.linkResolver);
    var label = RichText.asText(galleryItem.link_label);
    var button = null;
    if (link && label != " ") {
      button = <p className="gallery-link"><Link to={link}>{label}</Link></p>;
    }
    
    return (
      <div className="gallery-item"  key={index}>
        <img src={galleryItem.image.url}/>
        { description }
        { button }
      </div>
    );
  });
github margueriteroth / gatsby-prismic-starter-prist / src / templates / post.jsx View on Github external
{post.post_author}
                    </PostAuthor>
                    <PostDate>
                        <Moment format="MMMM D, YYYY">{post.post_date}</Moment>
                    </PostDate>
                </PostMetas>
                    {post.post_hero_image && (
                    <PostHeroContainer>
                        <img src={post.post_hero_image.url} alt="bees" />
                        <PostHeroAnnotation>
                            {RichText.render(post.post_hero_annotation)}
                        </PostHeroAnnotation>
                    </PostHeroContainer>
                )}
                <PostBody>
                    {RichText.render(post.post_body)}
                </PostBody>
            </Layout>
        </>
    )
}
github margueriteroth / gatsby-prismic-starter-prist / src / templates / post.jsx View on Github external
name: `twitter:creator`,
                        content: meta.author,
                    },
                    {
                        name: `twitter:title`,
                        content: meta.title,
                    },
                    {
                        name: `twitter:description`,
                        content: meta.description,
                    },
                ].concat(meta)}
            />
            <Layout>
                <PostCategory>
                    {RichText.render(post.post_category)}
                </PostCategory>
                <PostTitle>
                    {RichText.render(post.post_title)}
                </PostTitle>
                <PostMetas>
                    <PostAuthor>
                        {post.post_author}
                    </PostAuthor>
                    <PostDate>
                        <Moment format="MMMM D, YYYY">{post.post_date}</Moment>
                    </PostDate>
                </PostMetas>
                    {post.post_hero_image && (
                    <PostHeroContainer>
                        <img src={post.post_hero_image.url} alt="bees" />
                        <PostHeroAnnotation>
github birkir / gatsby-source-prismic-graphql / examples / pagination / src / templates / article.js View on Github external
const Article = props => {
  const title = get(props.data, 'prismic.allArticles.edges.0.node.title', []);
  const slices = get(props.data, 'prismic.allArticles.edges.0.node.body', []);
  const body = (slices || []).map((slice, index) => (
    <React.Fragment key={index}>
      {RichText.render(get(slice, 'primary.text', []) || [], linkResolver)}
    </React.Fragment>
  ));

  return (
    <Layout>
      {!!title && RichText.render(title, linkResolver)}
      {body}
      <Link to="/">Back to index</Link>
    </Layout>
  );
};
github prismicio / universal-react-website / src / shared / app / slices / TextSection.js View on Github external
export const TextSection = (props) => {
  
  var sectionClass = "content-section ";
  if (props.slice.slice_label) {
    sectionClass += "text-section-" + props.slice.slice_label;
  } else {
    sectionClass += "text-section-1col";
  }
  
  return (
    <section className={sectionClass}>
      {RichText.render(props.slice.primary.rich_text)}
    </section>
  );
};
github margueriteroth / gatsby-prismic-starter-prist / src / components / About.jsx View on Github external
const About = ({ bio, socialLinks }) => (
    <AboutContainer>
        <AboutLinkContainer>
            {socialLinks.map((social, i) => (
                <AboutLink
                    key={i}
                    href={social.about_link[0].spans[0].data.url}
                    target="_blank" rel="noopener noreferrer">
                    {social.about_link[0].text}
                    <span>&#8594;</span>
                </AboutLink>
            ))}
        </AboutLinkContainer>
        <AboutBio>
            {RichText.render(bio)}
        </AboutBio>
        <AboutActions>
            <a href="mailto:marguerite.roth@gmail.com" target="_blank" rel="noopener noreferrer">
                <Button className="Button--secondary">
                    Email me
                </Button>
            </a>
        </AboutActions>
    </AboutContainer>
)
github margueriteroth / gatsby-prismic-starter-prist / src / templates / post.jsx View on Github external
{
                        name: `twitter:title`,
                        content: meta.title,
                    },
                    {
                        name: `twitter:description`,
                        content: meta.description,
                    },
                ].concat(meta)}
            />
            <Layout>
                <PostCategory>
                    {RichText.render(post.post_category)}
                </PostCategory>
                <PostTitle>
                    {RichText.render(post.post_title)}
                </PostTitle>
                <PostMetas>
                    <PostAuthor>
                        {post.post_author}
                    </PostAuthor>
                    <PostDate>
                        <Moment format="MMMM D, YYYY">{post.post_date}</Moment>
                    </PostDate>
                </PostMetas>
                    {post.post_hero_image && (
                    <PostHeroContainer>
                        <img src={post.post_hero_image.url} alt="bees" />
                        <PostHeroAnnotation>
                            {RichText.render(post.post_hero_annotation)}
                        </PostHeroAnnotation>
                    </PostHeroContainer>
github birkir / gatsby-source-prismic-graphql / examples / languages / src / templates / home.js View on Github external
export default function Home(props) {
  const title = get(props.data, 'prismic.allHomepages.edges.0.node.column_title', []);
  const lang = get(props.pageContext, 'alternateLanguages.0.lang', '').replace('en-us', '');

  return (
    <Layout>
      {RichText.render(title)}
      <Link to={`/${lang}`}>Click here for alternative language</Link>
    </Layout>
  );
}

prismic-reactjs

render prismic rich text as React Element

Apache-2.0
Latest version published 2 years ago

Package Health Score

63 / 100
Full package analysis

Similar packages

    Popular JavaScript code snippets

    Find secure code to use in your application or website