1.0.17 • Published 6 months ago
react-text-range v1.0.17
react-text-range
using
// ...
import { TextContainer, RangeState, ReactTextRange } from "./ReactTextRange";
const MyTextContainer: TextContainer = React.forwardRef(({ }, ref) =>
<div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap" />
);
const App: FunctionComponent = () => {
const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 47 });
return (
<div style={{ margin: 20 }}>
<ReactTextRange initLeftPos={myPos.left} initRightPos={myPos.right}
Container={MyTextContainer} onChange={setMyPos}
handlerWidth={18}
selectionClass='bg-yellow-300 text-black'
text={`Some text
or even some real good multiline text
here and there`}
/>
<div>
<span>{myPos?.left}</span>
<span>{myPos?.right}</span>
</div>
</div>
)
}
You can set selectionClass, headClass, tailClass, leftHandlerClass and RightHandlerClass in ReactTextRange
1.0.17
6 months ago
1.0.16
7 months ago
1.0.15
7 months ago
1.0.14
7 months ago
1.0.13
7 months ago
1.0.12
7 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.9
7 months ago
1.0.8
7 months ago
1.0.7
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.4
7 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
7 months ago