Skip to main content

React

Table of contents:​

  • Render Props
  • Replace with Context

Render Props​

Use the button's children as label​

import { forwardRef } from 'react';
import { Button as KdsButton } from '@kickstartds/base/lib/button';

export const Button = forwardRef(({ children, ...props }, ref) => (
<KdsButton {...props} ref={ref} renderLabel={() => children} />
);

// Usage
<Button variant="solid" size="medium">
Click me
</Button>;

Allow markdown in label​

import { forwardRef } from 'react';
import { Button as KdsButton } from '@kickstartds/base/lib/button';
import Markdown from 'markdown-to-jsx';

export const Button = forwardRef((props, ref) => (
<KdsButton
{...props}
ref={ref}
renderLabel={(label) => <Markdown children={label} />}
/>
));

// Usage
<Button variant="solid" size="medium" label="*Click* me" />;

Replace with Context​

import { forwardRef } from 'react';
import {
Button as KdsButton,
ButtonContext,
ButtonContextDefault,
} from '@kickstartds/base/lib/button';
import { ContentBox } from "@kickstartds/base/content-box";
import Markdown from 'markdown-to-jsx';

const Button = forwardRef((props, ref) => (
<ButtonContextDefault
{...props}
ref={ref}
renderLabel={(label) => <Markdown children={label} />}
/>
));

export const ButtonProvider = (props) => (
<ButtonContext.Provider value={Button} {...props} />
);

// Usage
<ButtonProvider>
<KdsButton variant="solid" size="medium" label="*Click* me" />
</ButtonProvider>

// Works also with buttons nested in other components
<ButtonProvider>
<ContentBox
image="/image.jpg"
ratio="16:9"
alignement="left"
topic="Hey!"
link={
variant: "solid",
size: "medium",
label: "*Click* me" // <- !!
}
/>
</ButtonProvider>