How to use buttercms - 8 common examples
To help you get started, we’ve selected a few buttercms 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.
ButterCMS / react-cms-blog-with-next-js / pages / categories.js View on Github 
import React from 'react'
import Butter from 'buttercms'
const butter = Butter('your_api_token')
export default class extends React.Component {
static async getInitialProps ({ query }) {
const resp = await butter.category.list()
console.log(resp.data)
return resp.data
}
render () {
return (
<div>
{this.props.data.map((category, key) => {
return (
<div>
<a href="{`/posts/category/${category.slug}`}">{category.name}</a>
</div>
)</div>import React from 'react'
import Butter from 'buttercms'
import Head from 'next/head'
const butter = Butter('your_api_token')
export default class extends React.Component {
static async getInitialProps ({ query }) {
const resp = await butter.page.retrieve('customer_case_study', query.slug)
return resp.data
}
render () {
const product = this.props.data
const { seo_title: seoTitle, customer_logo: customerLogo, headline, testimonial } = product.fields
return (
<div>
<title>{seoTitle}</title>
</div>import React from 'react';
import Butter from 'buttercms'
import Transmit from 'react-transmit';
const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');
var Hello = React.createClass({
render: function() {
if (this.props.posts) {
return (
<div>
{this.props.posts.data.map((post) => {
return (
<div>{post.title}</div>
)
})}
</div>
);
} else {
return <div>Loading...</div>;
}import React from 'react'
import Butter from 'buttercms'
const butter = Butter('your_api_token')
export default class extends React.Component {
static async getInitialProps ({ query }) {
const resp = await butter.page.list('customer_case_study')
return resp.data
}
render () {
return (
<div>
{this.props.data.map((caseStudy, key) => {
return (
<div>
<img width="40" height="40" src="{caseStudy.fields.customer_logo}">
<a href="{`/case-studies/${caseStudy.slug}`}">{caseStudy.fields.headline}</a>
</div>
)</div>import React from 'react'
import Butter from 'buttercms'
import Head from 'next/head'
const butter = Butter('your_api_token')
export default class extends React.Component {
static async getInitialProps ({ query }) {
const resp = await butter.category.retrieve(query.slug, {
include: 'recent_posts'
})
return resp.data
}
render () {
const category = this.props.data
return (
<div>
<title>{category.name}</title>
</div>import React, { Component } from 'react'
import Butter from 'buttercms'
const butter = Butter('your_api_token')
class Faq extends Component {
static async getInitialProps () {
const resp = await butter.content.retrieve([ 'faq_headline', 'faq_items' ])
return resp.data.data
}
render () {
return (
<div>
<h1>{this.props.faq_headline}</h1>
<ul>
{this.props.faq_items.map((item) => {
return (
<li></li></ul></div>import React from 'react'
import Link from 'next/link'
import Butter from 'buttercms'
const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd')
export default class extends React.Component {
static async getInitialProps({ query }) {
let page = query.page || 1;
const resp = await butter.post.list({page: page, page_size: 10})
return resp.data;
}
render() {
const { next_page, previous_page } = this.props.meta;
return (
<div>
{this.props.data.map((post, key) => {
return (
<div><a href="{`/post/${post.slug}`}">{post.title}</a></div></div>import React from 'react'
import Butter from 'buttercms'
import Head from 'next/head'
const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd')
export default class extends React.Component {
static async getInitialProps({ query }) {
const resp = await butter.post.retrieve(query.slug);
return resp.data;
}
render() {
const post = this.props.data;
return (
<div>
<title>{post.seo_title}</title>
</div>
