Source

@component-controls/components

3.4.5

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

Component

browse

docs

issues

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

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 }}
    />
  );
};

browse

docs

issues

({
  language,
  children,
  dark,
}) => {
  return (
    <Source language={language} dark={dark}>
      {children}
    </Source>
  );
}

Controls

Name	Description	Default	Controls
children	source code to be displayed. string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)		export const sample = () => { const [state, setState] = React.useState(false); return ( <BooleanEditor name="prop" onChange={(name, newVal) => setState(newVal)} prop={{ type: ControlTypes.BOOLEAN, value: state }} /> ); };
language	source lnguage used, by default "jsx". markupbashclikeccppcssjavascriptjsxcoffeescriptactionscriptcss-extrdiffgitgographqlhandlebarsjsonlessmakefilemarkdownobjectivecocamlpythonreasonsassscsssqlstylustsxtypescriptwasmyaml	-
dark	used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. boolean	-

Properties

	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)

External dependencies

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

Internal dependencies

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

Component JSX

<SyntaxHighlighter

asstyle

SyntaxHighlighter

from"../SyntaxHighlighter"

Stories

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 }}
    />
  );
};

browse

docs

issues

() => (
  <Source theme={shadesOfPurple}>{source}</Source>
)

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 }}
    />
  );
};

browse

docs

issues

() => {
  const [theme, setTheme] = useState('dracula');
  const themeAction: ActionItem = {
    node: theme,
    onClick: () => {
      const themeNames = Object.keys(themes);
      const selected = themeNames.indexOf(theme);
      const nextTheme = selected < themeNames.length - 1 ? selected + 1 : 0;
      setTheme(themeNames[nextTheme]);
    },
  };
  return (
    <Source actions={[themeAction]} theme={themes[theme]}>
      {source}
    </Source>
  );
}

component-controls/Sidebar

component-controls/Subtitle

Docs

Source

Component

Overview

Controls

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Theme

Theme Selector