Source

@component-controls/components

3.4.5

Syntax highliting source code component. Uses prism for the actual source display.

browse

docs

issues

import { Source } from '@component-controls/components';

Theme Selector

export const sample = () => {
  const [state, setState] = React.useState(false);
  return (
    <BooleanEditor
      name="prop"
      onChange={(name, newVal) => setState(newVal)}
      prop={{ type: ControlTypes.BOOLEAN, value: state }}
    />
  );
};

	Name	Description	Default
ActionContainerProps (2 properties)

	actions	optional actions provided to the component ActionItem[]	-
	plain	if plain, skip the border and spacing around the children boolean	-
SyntaxHighlighterProps (9 properties)

package	imports	peer
copy-to-clipboard ^3.2.1	copy
react ^17.0.1	useStateMouseEventFC	*
theme-ui ^0.6.0-alpha.7	jsx

file	imports
"../SyntaxHighlighter"	SyntaxHighlighterSyntaxHighlighterProps
"../ActionContainer"	ActionContainerActionContainerProps

Stories

Overview

export const sample = () => {
  const [state, setState] = React.useState(false);
  return (
    <BooleanEditor
      name="prop"
      onChange={(name, newVal) => setState(newVal)}
      prop={{ type: ControlTypes.BOOLEAN, value: state }}
    />
  );
};

Theme

export const sample = () => {
  const [state, setState] = React.useState(false);
  return (
    <BooleanEditor
      name="prop"
      onChange={(name, newVal) => setState(newVal)}
      prop={{ type: ControlTypes.BOOLEAN, value: state }}
    />
  );
};

component-controls/Sidebar

component-controls/Subtitle

Docs

Source

Stories

Overview

Theme