How to use prismic-reactjs - 10 common examples

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>{label}</p>;
  }
  
  return (
    <section>
      <div>
        { RichText.render(highlight.primary.title, PrismicConfig.linkResolver) }
        { RichText.render(highlight.primary.headline, PrismicConfig.linkResolver) }
        { button }
      </div>
      <div>
        <img src="{">
      </div>
    </section>
  );
};

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>{label}</p>;
    }
    
    return (
      <div>
        <img src="{galleryItem.image.url}/">
        { description }
        { button }
      </div>

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>{label}</p>;
    }
    
    return (
      <div>
        <img src="{galleryItem.image.url}/">
        { description }
        { button }
      </div>
    );
  });

{post.post_author}
                    
                    
                        {post.post_date}
                    
                
                    {post.post_hero_image && (
                    
                        <img alt="bees" src="{post.post_hero_image.url}">
                        
                            {RichText.render(post.post_hero_annotation)}
                        
                    
                )}
                
                    {RichText.render(post.post_body)}
                
            
        
    )
}

name: `twitter:creator`,
                        content: meta.author,
                    },
                    {
                        name: `twitter:title`,
                        content: meta.title,
                    },
                    {
                        name: `twitter:description`,
                        content: meta.description,
                    },
                ].concat(meta)}
            />
            
                
                    {RichText.render(post.post_category)}
                
                
                    {RichText.render(post.post_title)}
                
                
                    
                        {post.post_author}
                    
                    
                        {post.post_date}
                    
                
                    {post.post_hero_image && (
                    
                        <img alt="bees" src="{post.post_hero_image.url}">

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) => (
    
      {RichText.render(get(slice, 'primary.text', []) || [], linkResolver)}
    
  ));

  return (
    
      {!!title && RichText.render(title, linkResolver)}
      {body}
      Back to index
    
  );
};

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>
      {RichText.render(props.slice.primary.rich_text)}
    </section>
  );
};

const About = ({ bio, socialLinks }) => (
    
        
            {socialLinks.map((social, i) => (
                
                    {social.about_link[0].text}
                    <span>→</span>
                
            ))}
        
        
            {RichText.render(bio)}
        
        
            <a rel="noopener noreferrer" href="mailto:marguerite.roth@gmail.com">
                <button>
                    Email me
                </button>
            </a>
        
    
)

{
                        name: `twitter:title`,
                        content: meta.title,
                    },
                    {
                        name: `twitter:description`,
                        content: meta.description,
                    },
                ].concat(meta)}
            />
            
                
                    {RichText.render(post.post_category)}
                
                
                    {RichText.render(post.post_title)}
                
                
                    
                        {post.post_author}
                    
                    
                        {post.post_date}
                    
                
                    {post.post_hero_image && (
                    
                        <img alt="bees" src="{post.post_hero_image.url}">
                        
                            {RichText.render(post.post_hero_annotation)}
                        

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 (
    
      {RichText.render(title)}
      Click here for alternative language
    
  );
}