tsinputlib
v1.0.11
Published
React UI components written in TypeScript
Readme
tsinput
React UI components
Installation
Package installation
npm install tsinputlibPrepare your project to use tsinputlib default styles and fonts
- Copy
public/css/tsinput.min.cssfile to your css folder. - Copy content of
public/fontsforlder to your fonts folder. - Add links to tsinput fonts and css styles tou your
index.htmlfile head section as follows:
<!doctype html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="css/tsinput.min.css" />
<link rel="stylesheet" href="fonts/tsinput-font.css" />
...
</head>
...
</html>Usage
Styles
.tsi-docs-label {
font-size: 16px;
margin: 0.5em;
max-width: 320px;
}
.tsi-docs-label-content {
padding: 0.5em;
border: 1px solid rgb(2, 0, 134);
border-radius: 5px;
}
.tsi-docs-label-green {
color: green;
}
.tsi-docs-label-blue {
color: blue;
}Code
import React from 'react'
import { Label } from 'tsinput'
import './App.css'
const App = () => {
return (
<>
<h4>Label stylization example:</h4>
<Label className="tsi-docs-label" label="Label caption:">
<div className="tsi-docs-label-content">Class name will be applied to the root element</div>
</Label>
<Label
className={{ _: 'tsi-docs-label tsi-docs-label-green', label: 'tsi-docs-label-blue' }}
text="Label caption:"
>
<div className="tsi-docs-label-content">
To use class for text, use text "key" in the style label text and "_" for the root element
</div>
</Label>
<Label className="tsi-docs-label" style={{ color: 'red', label: { color: 'green' } }} label="Label caption:">
<div className="tsi-docs-label-content">Using "style" property is also available</div>
</Label>
</>
)
}
export default App