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 Styleguide 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 Styleguide 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.

To see which components have been registered for your styleguide you can visit the styleguide page under settings in your dashboard https://app.candu.ai/settings/styleguide​

Components

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

Styleguide 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 (Italic)

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>
)