React Styleguide

Render native onboarding experiences by injecting your React Styleguide.

Candu makes it easy to sync your styles in order to render onboarding experiences that look and feel 100% like your own.

To create global styles for all of Candu's content, you can inject a Style Guide in the Candu runtime via the styleguide argument in the CanduProvider.

Use Preview to test how your styles will look within your application.

const styleguide = {
P: (props) => <p {...props} />
}
​
<CanduProvider
clientToken="YOUR_CLIENT_TOKEN"
userId="YOUR_USER_ID"
styleguide={styleguide}
/>

If a Style Guide component is not defined, Candu will fall back to plain HTML. So you'll want to set up the components that are critical to your product experience.

Components

At a glance, here are the components that you can define within the Style Guide:

Style Guide key

Component name

A

Link

Alert

Alert

B

Bold

Button

Button

Card

Card

Em

Emphasis

Flex

Flex

FlexItem

FlexItem

H1

Header 1

H2

Header 2

H3

Header 3

Img

Image

InlineCode

Inline Code

P

Paragraph

U

Underline

ListItem

List Item

ListItemChild

List Item Child

OrderedList

Ordered List

UnorderedList

Unordered List

Tab

Tab

TabGroup

Tab Group

TabGroupHeader

TabGroupHeader

TabGroupHeaderItem

TabGroupHeaderItem

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

Alert

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

B - Bold

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

Button

const Button = ({ children, handlers }) => (
<button {...handlers}>{children}</button>
);
​
Button.propTypes = {
children: PropTypes.node.isRequired,
handlers: PropTypes.object.isRequired
}

Card

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

Em - Emphasis

const Em = ({ children}) => <em>{children</em>
​
Em.propTypes = {
children: PropTypes.node.isRequired
}

Flex

const Flex = ({ children }) => <div style={{ display: 'flex' }}>{children}</div>
​
Flex.propTypes = {
children: PropTypes.node.isRequired
}

FlexItem

const FlexItem = ({ children }) => <div style={{ display: 'flex' }}>{children}</div>
​
FlexItem.propTypes = {
children: PropTypes.node.isRequired
}

H1

const H1 = ({ children }) => <h1>{children}</h1>
​
H1.propTypes = {
children: PropTypes.node.isRequired
}

H2

const H2 = ({ children }) => <h2>{children}</h2>
​
H2.propTypes = {
children: PropTypes.node.isRequired
}

H3

const H3 = ({ children }) => <h3>{children}</h3>
​
H3.propTypes = {
children: PropTypes.node.isRequired
}

Img

const Img = ({ alt, src, width, height }) => (
<img src={src} alt={alt || ''} width={width} height={height} />
)
​
Img.propTypes = {
alt: PropTypes.node,
src: PropTypes.string.isRequired,
width: PropTypes.string,
height: PropTypes.string,
}

InlineCode

P - Paragraph

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

U

const U = ({ children }) => <u>{children}</u>
​
U.propTypes = {
children: PropTypes.node.isRequired
}

ListItem

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

ListItemChild

const ListItemChild = ({ children }) => <div>{children}</div>
​
ListItemChild.propTypes = {
children: PropTypes.node.isRequired
}

OrderedList

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

UnorderedList

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

Tab

const Tab = ({ children }) => <div>{children}</div>

TabGroup

const TabGroup = ({ children }) => (
<div style={tabGroupStyle}>{children}</div>
);

TabGroupHeader

export const TabGroupHeader = ({ children }) => (
<div style={tabGroupHeaderStyle}>{children}</div>
);

TabGroupHeaderItem

const TabGroupHeaderItem = ({ active,
id,
role,
children,
onClick,
...otherProps }) => (
<div
id={id}
style={{ ...tabGroupHeaderItemStyle, ...(active ? tabGroupHeaderItemActiveStyle : {}) }}
aria-controls={otherProps['aria-controls']}
aria-selected={otherProps['aria-selected']}
onClick={onClick}
>
{children}
</div>
)