1.1.7 • Published 6 years ago
react-custom-ampersand v1.1.7
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
import React from 'react';
import ReactCustomAmpersand from 'react-custom-ampersand';
class YourHeadingComponent extends React.Component {
render () {
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:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&amp;text=%26" rel="stylesheet" data-react-helmet="true">
// your content in the `body` element:
<h1> This is a heading <span style="color:rebeccapurple;line-height:.9;font-family: Display Playfair, serif;">&</span> it contains a fancy ampersand.</h1>
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:
import React from 'react';
import {applyCustomAmpersands} from 'react-custom-ampersand';
class YourHeadingComponent extends React.Component {
render () {
// 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>
{applyCustomAmpersands(myHeadingText)}
</h1>
);
}
};
outputs:
// reference to Google Font "&" character automatically added to the `head` element:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&amp;text=%26" rel="stylesheet" data-react-helmet="true">
// your content in the `body` element:
<h1> This is a heading <span style="color:rebeccapurple;line-height:.9;font-family: Display Playfair, serif;">&</span> it contains a fancy ampersand.</h1>
And, of course, you could pass in your own props to alter the styling, like so:
import React from 'react';
import {applyCustomAmpersands} from 'react-custom-ampersand';
class YourHeadingComponent extends React.Component {
render () {
// 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>
{
applyCustomAmpersands(myHeadingText, {
color: '#bada55',
lineHeight: '1.4',
fontName: 'Abril Fatface'
})
}
</h1>
);
}
};
outputs:
// reference to Google Font "&" character automatically added to the `head` element:
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;text=%26" rel="stylesheet" data-react-helmet="true">
// your content in the `body` element:
<h1> This is a heading <span style="color:#bada55;line-height:1.4;font-family: Abril Fatface, serif;">&</span> it contains a fancy ampersand.</h1>
License
MIT