React Custom Ampersand
This React component can replace plain ampersand characters with styled span tags containing a custom Google Font ampersand character.
Only a single character of the Google Font of your choice is downloaded. You can set the optional props to override the styling defaults, which are:
color: 'rebeccaPurple' lineHeight: '.9' fontFamily: 'Playfair Display'
Installation
Yarn:
yarn add react-custom-ampersand
npm:
npm install react-custom-ampersand
Usage Example
;; Component { return <h1> This is a heading <ReactCustomAmpersand/> it contains a fancy ampersand </h1> ; };
outputs:
// reference to Google Font "&" character automatically added to the `head` element: // your content in the `body` element: This is a heading & it contains a fancy ampersand.
However, rather than importing the component directly, you may prefer to import a helper function which will find plain "&" characters in a given string of text and automatically replace each of them with an instance of the ReactCustomAmpersand component. For example:
;; Component { // using a `myHeadingText` variable here, but you could use props.children instead const myHeadingText = 'This is a heading & it contains a fancy ampersand.' return <h1> </h1> ; };
outputs:
// reference to Google Font "&" character automatically added to the `head` element: // your content in the `body` element: This is a heading & it contains a fancy ampersand.
And, of course, you could pass in your own props to alter the styling, like so:
;; Component { // using a `myHeadingText` variable here, but you could use props.children instead const myHeadingText = 'This is a heading & it contains a fancy ampersand.' return <h1> </h1> ; };
outputs:
// reference to Google Font "&" character automatically added to the `head` element: // your content in the `body` element: This is a heading & it contains a fancy ampersand.
License
MIT