https://github.com/asplunds/react-echo
React Typography Component
https://github.com/asplunds/react-echo
css react typography
Last synced: 3 months ago
JSON representation
React Typography Component
- Host: GitHub
- URL: https://github.com/asplunds/react-echo
- Owner: asplunds
- License: mit
- Created: 2023-06-13T18:44:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T10:00:48.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T15:21:11.628Z (5 months ago)
- Topics: css, react, typography
- Language: TypeScript
- Homepage:
- Size: 1.79 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `React Echo`
## Rewriting the same typography component stops now
React Echo is a clean and delightful component for all things text!
```sh
npm install react-echo
yarn add react-echo
pnpm add react-echo
```
## Usage
React Echo is **un-opinionated** it makes no assumptions about your typography styling; your app, your styles. Reach Echo is here to make your app better, not impose styles. 💪
```tsx
import { Text, TextProvider } from "react-echo";
import { styles } from "./text.module.css";
function App() {
return (
Hello World!
);
}
```
**text.module.css**
```css
.text, .text.h {
margin: 0;
font-family: arial;
}
.text.p {
}
.text.inline {
}
.text.h {
}
.text.h1 {
}
.text.h2 {
}
.text.h3 {
}
.text.h4 {
}
.text.h5 {
}
.text.h6 {
}
.text.a {
}
.text.bold {
}
.text.underline {
}
.text.strikeThrough {
}
```
## Reference
```jsx
Paragraph
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 3 with heading 1 styles (SEO)
Place inline
text
inside and
render
as
span
I'm bold and boring
bold
bolder
normal
lighter
custom
```