React Styleguide

Candu makes it easy to sync your styles and create an application that looks and feels 100% exactly like yours.

This can be achieved by injecting your styleguide in the Candu runtime via the styleguide argument in the CanduProvider.

If there isn't a Styleguide component, we will fall back to a default using plain HTML, so don't worry about having to define every style.

Components

At a glance, here are all the components that we define

Styleguide key

Component name

P

Paragraph

B

Bold

I

Italics

A

Link

OL

Ordered List

UL

Unordered List

LI

List Item

Card

Card

H1

Header One

H2

Header Two

H3

Header Three

Alert

Alert

Code

Code

Injecting any component is easy:

const P = ({children}) => <p className="my-custom-component">{children}</p>
const styleguide = {
P
}
<CanduProvider
clientToken="YOUR_CLIENT_TOKEN"
userId="YOUR_USER_ID"
styleguide={styleguide}
/>

Paragraph

const P = ({ children}) => <p>{children</p>
P.propTypes = {
children: PropTypes.node.isRequired
}

Bold

const B = ({ children}) => <b>{children</b>
B.propTypes = {
children: PropTypes.node.isRequired
}

Italics

const I = ({ children}) => <i>{children</i>
I.propTypes = {
children: PropTypes.node.isRequired
}

Link

const A = ({ children, href}) => <a href={href}>{children}</a>
A.propTypes = {
children: PropTypes.node.isRequired,
href: PropTypes.string.isRequired,
}

Ordered List

const OL = ({ children }) => <ol>{children}</ol>
OL.propTypes = {
children: PropTypes.node.isRequired,
}

Unordered List

const UL = ({ children }) => <ul>{children}</ul>
UL.propTypes = {
children: PropTypes.node.isRequired,
}

List Item

const LI = ({ children }) => <li>{children}</li>
LI.propTypes = {
children: PropTypes.node.isRequired,
}

Card

const Card = ({ children }) => <div className="card-styles">{children}</div>
Card.propTypes = {
children: PropTypes.node.isRequired,
}

Alert

const Alert = ({ children, color}) => <div className={`alert-style-${color}`}>{children}</div>
A.propTypes = {
children: PropTypes.node.isRequired,
color: PropTypes.string.isRequired,
}

Code

const Code = ({ children, language}) => <div>{children}</div>
Code.propTypes = {
children: PropTypes.node.isRequired,
language: PropTypes.string.isRequired
}