tsinputlib
v1.0.11
Published
React UI components written in TypeScript
Downloads
810
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