Code for read more buttons can get cumbersome when there is some conditional string splitting and slicing involved. I couldn't find any open source hooks that would take care of it so there it is. React hook for quick and elegant use in read more buttons!
npm install react-hook-use-read-morereact-hook-use-read-more 📖Code for read more buttons can get cumbersome when there is some conditional string splitting and slicing involved. I couldn't find any open source hooks that would take care of it so there it is. React hook for quick and elegant use in read more buttons! Enjoy 🤗
Install it with npm:
``
npm i react-hook-use-read-more
Or with yarn:
`
yarn add react-hook-use-read-more
`typescript
const { firstPart, secondPart } = useReadMore("Lorem ipsum dolor sit amet")
`
`typescript
useReadMore(text: string, config?: Config)
`
`typescript
type Config = {
treshold?: number
firstPartMaxLength?: number
}
`
- treshold (number, optional, default: 50): percent of text set as excerpt (firstPart) See example
- firstPartMaxLength [number, optional, default: -1 (disabled, unlimited length)]: max length of excerpt (firstPart) See example
`typescript
import React, { useState } from "react"
import useReadMore from "react-hook-use-read-more"
const Component: React.FC = () => {
const { firstPart, secondPart
} = useReadMore("Hello world foo bar")
const [showMore, setShowMore
] = useState
const handleClick = () => {
setShowMore(!showMore)
}
return (
// Hello world
{firstPart}
// foo bar
{showMore ? secondPart : ""}
export default Component
`
`typescript
import React, { useState } from "react"
import useReadMore from "react-hook-use-read-more"
const Component: React.FC = () => {
const { firstPart, secondPart
} = useReadMore("Hello world foo bar", {
// Translates to treshold at 25%
treshold: 25
})
const [showMore, setShowMore
] = useState
const handleClick = () => {
setShowMore(!showMore)
}
return (
// Hello
{firstPart}
// world foo bar
{showMore ? secondPart : ""}
export default Component
`
`typescript
import React, { useState } from "react"
import useReadMore from "react-hook-use-read-more"
const Component: React.FC = () => {
const { firstPart, secondPart
} = useReadMore("Banana apple pear peach strawberry raspberry", {
firstPartMaxLength: 2
})
const [showMore, setShowMore
] = useState
const handleClick = () => {
setShowMore(!showMore)
}
return (
// Banana apple
{firstPart}
// pear peach strawberry raspberry
{showMore ? secondPart : ""}
export default Component
``