Skip to main content

React

Table of contents:

  • Render Props
  • Replace with Context

Render Props

Use the button's children as label


_11
import { forwardRef } from 'react';
_11
import { Button as KdsButton } from '@kickstartds/base/lib/button';
_11
_11
export const Button = forwardRef(({ children, ...props }, ref) => (
_11
<KdsButton {...props} ref={ref} renderLabel={() => children} />
_11
);
_11
_11
// Usage
_11
<Button variant="solid" size="medium">
_11
Click me
_11
</Button>;

Allow markdown in label


_14
import { forwardRef } from 'react';
_14
import { Button as KdsButton } from '@kickstartds/base/lib/button';
_14
import ReactMarkdown from 'react-markdown';
_14
_14
export const Button = forwardRef((props, ref) => (
_14
<KdsButton
_14
{...props}
_14
ref={ref}
_14
renderLabel={(label) => <ReactMarkdown children={label} />}
_14
/>
_14
));
_14
_14
// Usage
_14
<Button variant="solid" size="medium" label="*Click* me" />;

Replace with Context


_40
import { forwardRef } from 'react';
_40
import {
_40
Button as KdsButton,
_40
ButtonContext,
_40
ButtonContextDefault,
_40
} from '@kickstartds/base/lib/button';
_40
import { ContentBox } from "@kickstartds/base/content-box";
_40
import ReactMarkdown from 'react-markdown';
_40
_40
const Button = forwardRef((props, ref) => (
_40
<ButtonContextDefault
_40
{...props}
_40
ref={ref}
_40
renderLabel={(label) => <ReactMarkdown children={label} />}
_40
/>
_40
));
_40
_40
export const ButtonProvider = (props) => (
_40
<ButtonContext.Provider value={Button} {...props} />
_40
);
_40
_40
// Usage
_40
<ButtonProvider>
_40
<KdsButton variant="solid" size="medium" label="*Click* me" />
_40
</ButtonProvider>
_40
_40
// Works also with buttons nested in other components
_40
<ButtonProvider>
_40
<ContentBox
_40
image="/image.jpg"
_40
ratio="16:9"
_40
alignement="left"
_40
topic="Hey!"
_40
link={
_40
variant: "solid",
_40
size: "medium",
_40
label: "*Click* me" // <- !!
_40
}
_40
/>
_40
</ButtonProvider>