Source

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

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

Test data

select	#	dark	children
	1		Johnny Oberbrunner
	2		Jolie Beahan Sr.
	3		Cleo Lindgren
	4		Tyler Blanda
	5		Krista Zulauf

5 data rows

Name	Description	Default	Controls
children	source code to be displayed. (string & (boolean \| ReactChild \| ReactFragment \| ReactPortal \| null))		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	-

Tests results

	Status	Full name	Title	Time(ms)
Source.test.ts(14 tests)
	passed	Source > overview > 1	snapshot	91
	passed	Source > overview > 1	accessibility	157
	passed	Source > overview > 2	snapshot	35
	passed	Source > overview > 2	accessibility	104
	passed	Source > overview > 3	snapshot	43
	passed	Source > overview > 3	accessibility	109
	passed	Source > overview > 4	snapshot	53
	passed	Source > overview > 4	accessibility	114
	passed	Source > overview > 5	snapshot	59

total 14 tests

Tests coverage

	Kind	Total	Covered	Skipped	%
Source.tsx
	lines	17	12	0	70.58%
	functions	3	1	0	33.33%
	statements	19	13	0	68.42%
	branches	7	4	0	57.14%

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

Viewport

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

320px

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

375px

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

768px

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

1024px

Components/Sidebar

Components/Subtitle

API

Source

Test data

Tests results

Tests coverage

A11y tests

Viewport