HUA Docs - The Syntax of Emotion

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { CodeBlock, InlineCode } from "@hua-labs/hua";

tsx

1import { useState } from 'react';
2import { Button, Card } from '@hua-labs/hua';
3 
4function Counter() {
5  const [count, setCount] = useState(0);
6 
7  return (
8    <Card className="p-4">
9      <p>Count: {count}</p>
10      <Button onClick={() => setCount(count + 1)}>
11        Increment
12      </Button>
13    </Card>
14  );
15}

hua.config.tstypescript

1// hua.config.ts
2export default {
3  theme: {
4    primary: '#3b82f6',
5    secondary: '#64748b',
6  },
7  plugins: ['forms', 'typography'],
8};

javascript

const message = "Hello, World!";
console.log(message);

bash

npm install @hua-labs/hua

javascript

1// Long code example
2console.log('Line 1');
3console.log('Line 2');
4console.log('Line 3');
5console.log('Line 4');
6console.log('Line 5');
7console.log('Line 6');
8console.log('Line 7');
9console.log('Line 8');
10console.log('Line 9');
11console.log('Line 10');
12console.log('Line 11');
13console.log('Line 12');
14console.log('Line 13');
15console.log('Line 14');
16console.log('Line 15');
17console.log('Line 16');
18console.log('Line 17');
19console.log('Line 18');
20console.log('Line 19');
21console.log('Line 20');

npm install @hua-labs/hua


`code*`	`string`	-	docs:components.codeBlock.props.code
`language`	`string`	-	docs:components.codeBlock.props.language
`filename`	`string`	-	docs:components.codeBlock.props.filename
`showLineNumbers`	`boolean`	`false`	docs:components.codeBlock.props.showLineNumbers
`showCopyButton`	`boolean`	`true`	docs:components.codeBlock.props.showCopyButton
`onCopy`	`() => void`	-	docs:components.codeBlock.props.onCopy
`theme`	`"dark" \| "light"`	`"dark"`	docs:components.codeBlock.props.theme
`maxHeight`	`string \| number`	-	docs:components.codeBlock.props.maxHeight
`copySuccessMessage`	`string`	`"Copied!"`	Message to display when code is successfully copied

docs:common.basicUsagetsx

1// Via framework (recommended)
2import { CodeBlock } from '@hua-labs/hua';
3// Or direct import
4// import { CodeBlock } from '@hua-labs/ui/data';
5 
6<CodeBlock
7  code="console.log('Hello, World!')"
8  language="javascript"
9/>

docs:components.codeBlock.examples.withFilenametsx

1<CodeBlock
2  code={configCode}
3  language="typescript"
4  filename="hua.config.ts"
5  showLineNumbers
6/>

docs:components.codeBlock.examples.lightThemetsx

1<CodeBlock
2  code="const greeting = 'Hello'"
3  language="typescript"
4  theme="light"
5/>

docs:components.codeBlock.examples.inlineCodetsx

1import { InlineCode } from '@hua-labs/hua';
2 
3<p>
4  Use the <InlineCode>npm install</InlineCode> command.
5</p>

InlineCode -

•docs:components.codeBlock.accessibility.copyButton: docs:components.codeBlock.accessibility.copyButtonDesc
•docs:common.accessibility.keyboard: docs:components.codeBlock.accessibility.keyboardDesc
•docs:components.codeBlock.accessibility.visualFeedback: docs:components.codeBlock.accessibility.visualFeedbackDesc

Table Timeline