Components

Colors

Preview:

				
					var(--color-darkblue)
				
			

Preview:

				
					var(--color-greyblue)
				
			

Preview:

				
					var(--color-blue)
				
			

Preview:

				
					var(--color-lightblue)
				
			

Preview:

				
					var(--color-green)
				
			

Preview:

				
					var(--color-yellow)
				
			

Preview:

				
					var(--color-red)
				
			

Preview:

				
					var(--color-white)
				
			

Checkbox

Preview:

Props:

• checked: true / false
• onChange: function when checkbox value has changes
• ucolor: color when in unchecked status
• ccolor: color when in checked status

 

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const { useState } = React;
  const Checkbox = templateToReact('checkbox');
  const App = () => {
    const [checked, setChecked] = useState(false);
    return (
      <Checkbox
        checked={checked}
        onChange={(newValue) => {
          console.log('newValue', newValue);
          setChecked(newValue);
        }}
        ucolor='blue'
      />
    );
  };
  return <App />;
});
				
			

Button

Preview:

Props:

• icon: leave blank to not show icon, get value from this cssfont or fontawesomev4
• size: large, medium, small
• colorbg: color background of button
• colortext: color text of button

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const Button = templateToReact('button');
  const App = () => {
    return (
        <Button
          icon='gg-arrow-right'
          text=''
          size='small'
          colorbg='var(--color-blue)'
          colortext='var(--color-white)'
        />
        <Button
          icon=''
          text='Demo'
          size='medium'
          colorbg='var(--color-yellow)'
          colortext='var(--color-white)'
        />
        <Button
          icon='fa-id-card'
          text='Demo'
          size='large'
          colorbg='var(--color-darkblue)'
          colortext='var(--color-white)'
        />
    );
  };
  return <App />;
});
				
			

Heading

Preview:

Props:

• type: type of heading //h1, h2, h3, h4, h5
• color: color of heading
• text: text of heading
• className: class of heading (use if needed)

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const Heading = templateToReact('heading');
  const App = () => {
    return (
        <Heading
          type='h1'
          color='var(--color-darkblue)'
          text='Lorem ipsum'
          className=''
        />
        <Heading
          type='h2'
          color='var(--color-darkblue)'
          text='Lorem ipsum'
          className=''
        />
        <Heading
          type='h3'
          color='var(--color-darkblue)'
          text='Lorem ipsum'
          className=''
        />
        <Heading
          type='h4'
          color='var(--color-darkblue)'
          text='Lorem ipsum'
          className=''
        />
        <Heading
          type='h5'
          color='var(--color-darkblue)'
          text='Lorem ipsum'
          className=''
        />
    );
  };
  return <App />;
});
				
			

Text

Preview:

Props:

• type: type of text //p
• color: color of text
• text: content
• className: class of text (use if needed)

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const Text = templateToReact('text');
  const App = () => {
    return (
        <Text
          type='p'
          color='var(--color-greyblue)'
          text='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum elit a magna vestibulum vulputate. Sed porta massa eu lacus rhoncus laoreet. Nunc a accumsan ex. Integer rhoncus, justo tincidunt accumsan lacinia, libero lacus malesuada magna, viverra consequat dui risus et justo.'
          className='abc'
        />
    );
  };
  return <App />;
});
				
			

Input

Preview:

Props:

• value: value of input.
• onChange: function when input value has changes.
• showSubmitButton: show submit button of input (true, false).
• onEntered: function when user enter of click submit button.

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const { useState } = React;
  const Input = templateToReact('input');
  const App = () => {
    const [value, setValue] = useState('');
    return (
        <Input
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          showSubmitButton={true}
          onEntered={
            () => { alert('Form submitted') }
          }
        />
        <Input
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          showSubmitButton={false}
          onEntered={
            () => { alert('Form submitted') }
          }
        />
    );
  };
  return <App />;
});
				
			

Input Copy

Preview:

Props:

• value: value of input.
• onChange: function when input value has changes.

				
					// @ts-ignore
reactRender((React, { templateToReact }) => {
  const { useState } = React;
  const InputCopy = templateToReact('inputcopy');
  const App = () => {
    const [value, setValue] = useState('');
    return (
        <InputCopy
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
        />
    );
  };
  return <App />;
});