Skip to content

Commit

Permalink
updated how example page is rendered
Browse files Browse the repository at this point in the history
  • Loading branch information
@couetilc
couetilc committed Apr 27, 2021
1 parent 728ac37 commit 56baf3f
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 134 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ build
build.tar.gz
lib
.cache
notes.md
186 changes: 148 additions & 38 deletions examples/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,151 @@ import ReactDOM from 'react-dom'
import * as networks from '../src/networks.js'
import { SocialIcon } from '../src/react-social-icons.js'

const h = React.createElement

const lib = h(
'div',
{},
networks.KEYS.map(k => h(SocialIcon, { network: k, title: k, key: k }))
)

const urlExample = h(SocialIcon, { url: 'https://linkedin.com/in/jaketrent' })

const networkExample = h(SocialIcon, {
network: 'tumblr',
url: 'https://jaketrent.com'
})

const bgColorExample = h(SocialIcon, { network: 'twitter', bgColor: '#ff5a01' })

const fgColorExample = h(SocialIcon, { network: 'twitter', fgColor: '#ff5a01' })

const labelExample = h(SocialIcon, {
url: 'https://www.example.com',
label: 'Our portfolio'
})

const sizes = h('div', {}, [
h(SocialIcon, { network: 'pinterest', style: { height: 25, width: 25 }, key: '25' }),
h(SocialIcon, { network: 'pinterest', style: { height: 50, width: 50 }, key: '50' }),
h(SocialIcon, { network: 'pinterest', style: { height: 100, width: 100 }, key: '100' }),
h(SocialIcon, { network: 'pinterest', style: { height: 200, width: 200 }, key: '200' })
])

ReactDOM.render(lib, document.getElementById('lib'))
ReactDOM.render(networkExample, document.getElementById('network-example'))
ReactDOM.render(urlExample, document.getElementById('url-example'))
ReactDOM.render(bgColorExample, document.getElementById('bg-color-example'))
ReactDOM.render(fgColorExample, document.getElementById('fg-color-example'))
ReactDOM.render(labelExample, document.getElementById('label-example'))
ReactDOM.render(sizes, document.getElementById('sizes'))
function Page() {
return (
<>
<h1>
<a href="https://github.com/jaketrent/react-social-icons">react-social-icons</a>
</h1>
<p>
A set of beautiful svg social icons. Easily used in React. No images or
external css dependencies.
</p>

<h2>Library</h2>
<p>Here are the available icons.</p>
<div id="lib">
{networks.KEYS.map(k => <SocialIcon network={k} title={k} key={k} />)}
</div>

<h2>Usage</h2>

<h4>Detect URL</h4>
<p>
By default, pass the <code>url</code> of your social network, and the
icon will be detected from the url.
</p>
<div className="one-line-example">
<div className="icon" id="url-example">
<SocialIcon url="https://linkedin.com/in/jaketrent" />
</div>
<code className="code">
<pre>{`<SocialIcon url="https://linkedin.com/in/jaketrent" />`}</pre>
</code>
</div>

<h4>Specify Network</h4>
<p>
If you have a need to specify the network, you can. If you don't
specify a url, your <code>href</code> attribute will be omitted. You
can include props for both <code>url</code> and <code>network</code>.
The <code>network</code> prop takes precedence.
</p>
<div className="one-line-example">
<div className="icon" id="network-example">
<SocialIcon network="tumblr" url="https://jaketrent.com" />
</div>
<code className="code">
<pre>{`<SocialIcon url="https://jaketrent.com" network="tumblr" />`}</pre>
</code>
</div>

<h4>Specify the Color</h4>
<p>
You can override the background fill color associated with the network
with the <code>bgColor</code> prop.
</p>
<div className="one-line-example">
<div className="icon" id="bg-color-example">
<SocialIcon network="twitter" bgColor="#ff5a01" />
</div>
<code className="code">
<pre>{`<SocialIcon network="twitter" bgColor="#ff5a01" />`}</pre>
</code>
</div>

<p>
You can fill the usually-transparent icon color with the&nbsp;
<code>fgColor</code> prop.
</p>
<div className="one-line-example">
<div className="icon" id="fg-color-example">
<SocialIcon network="twitter" fgColor="#ff5a01" />
</div>
<code className="code">
<pre>{`<SocialIcon network="twitter" fgColor="#ff5a01" />`}</pre>
</code>
</div>

<h4>Specify the Label</h4>
<p>
By default, the <code>SocialIcon</code> will use the name of a social
network as an icon's accessible label. If you think the social
network name is not enough context, you can pass in the <code>label</code>
&nbsp;prop.
</p>
<div className="one-line-example">
<div className="icon" id="label-example">
<SocialIcon url="https://www.example.com" label="Our portfolio" />
</div>
<code className="code">
<pre>{`<SocialIcon url="https://www.example.com" label="Our portfolio" />`}</pre>
</code>
</div>

<h4>Render</h4>
<p>The full code required to render.</p>
<code className="code">
<pre>{
`var React = require('react');
var { SocialIcon } = require('react-social-icons');
React.render(<SocialIcon url="https://linkedin.com/in/jaketrent" />, document.body);`
}</pre>
</code>

<h2>It scales!</h2>
<p>Witness the beautiful SVG in action.</p>
<p>
<i>Note:</i> this library injects on-page <code>style</code> tags into
the <code>head</code>. This is great because you don't have to
import any additional stylesheet to support this library. But more
specificity in selectors will be required when overriding default
styles from external stylesheets.
</p>
<div id="sizes">
<SocialIcon network="pinterest" style={{ height: 25, width: 25 }} key="25" />
<SocialIcon network="pinterest" style={{ height: 50, width: 50 }} key="50" />
<SocialIcon network="pinterest" style={{ height: 100, width: 100 }} key="100" />
<SocialIcon network="pinterest" style={{ height: 200, width: 200 }} key="200" />
</div>

<code>
<pre>{
`<SocialIcon network="pinterest" style={{ height: 25, width: 25 }} />
<SocialIcon network="pinterest" style={{ height: 50, width: 50 }} />
<SocialIcon network="pinterest" style={{ height: 100, width: 100 }} />
<SocialIcon network="pinterest" style={{ height: 200, width: 200 }} />`
}</pre>
</code>

<h2>Feedback</h2>
<p>
If you're interested in adding additional networks or helping make the
library better, <a href="https://github.com/jaketrent/react-social-icons">
fork it on github</a> and let the code fly!
</p>

<footer className="footer">
<p>
<a href="https://github.com/jaketrent/react-social-icons/blob/master/LICENSE.md">
MIT Licensed
</a>
&nbsp;- from&nbsp;
<a href="https://jaketrent.com">Jake Trent</a>
</p>
</footer>
</>
);
}

ReactDOM.render(<Page />, document.getElementById('page'));
99 changes: 3 additions & 96 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,106 +5,13 @@
<title>Social Icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="app.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body class="black index">
<span><a target="_top" href="https://github.com/jaketrent/react-social-icons"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a></span>

<div class="container">
<h1><a href="https://github.com/jaketrent/react-social-icons">react-social-icons</a></h1>
<p>A set of beautiful svg social icons. Easily used in React. No images or external css dependencies.</p>

<h2>Library</h2>
<p>Here are the available icons.</p>
<div id="lib"></div>

<h2>Usage</h2>

<h4>Detect URL</h4>
<p>By default, pass the <code>url</code> of your social network, and the icon will be detected from the url.</p>
<div class="one-line-example">
<div class="icon" id="url-example"></div>
<code class="code">
<pre>&lt;SocialIcon url="https://linkedin.com/in/jaketrent" /&gt;</pre>
</code>
</div>

<h4>Specify Network</h4>
<p>
If you have a need to specify the network, you can. If you don't specify a url, your
<code>href</code> attribute will be omitted. You can include props for both <code>url</code>
and <code>network</code>. The <code>network</code> prop takes precedence.
</p>
<div class="one-line-example">
<div class="icon" id="network-example"></div>
<code class="code">
<pre>&lt;SocialIcon url="https://jaketrent.com" network="tumblr" /&gt;</pre>
</code>
</div>

<h4>Specify the Color</h4>
<p>
You can override the background fill color associated with the network with the <code>bgColor</code> prop.
</p>
<div class="one-line-example">
<div class="icon" id="bg-color-example"></div>
<code class="code">
<pre>&lt;SocialIcon network="twitter" bgColor="#ff5a01" /&gt;</pre>
</code>
</div>

<p>
You can fill the usually-transparent icon color with the <code>fgColor</code> prop.
</p>
<div class="one-line-example">
<div class="icon" id="fg-color-example"></div>
<code class="code">
<pre>&lt;SocialIcon network="twitter" fgColor="#ff5a01" /&gt;</pre>
</code>
</div>

<h4>Specify the Label</h4>
<p>
By default, the <code>SocialIcon</code> will use the name of a social network as an icon's accessible label. If you think the social network name is not enough context, you can pass in the <code>label</code> prop.
</p>
<div class="one-line-example">
<div class="icon" id="label-example"></div>
<code class="code">
<pre>&lt;SocialIcon url="https://www.example.com" label="Our portfolio" /&gt;</pre>
</code>
</div>

<h4>Render</h4>
<p>The full code required to render.</p>
<code class="code">
<pre>var React = require('react');
var { SocialIcon } = require('react-social-icons');
React.render(&lt;SocialIcon url="https://linkedin.com/in/jaketrent" /&gt;, document.body);</pre>
</code>

<h2>It scales!</h2>
<p>Witness the beautiful SVG in action.</p>
<p><i>Note:</i> this library injects on-page <code>style</code> tags into the <code>head</code>. This is great because you don't have to import any additional stylesheet to support this library. But more specificity in selectors will be required when overriding default styles from external stylesheets.</p>
<div id="sizes"></div>

<code>
<pre>&lt;SocialIcon network="pinterest" style={{ height: 25, width: 25 }} /&gt;
&lt;SocialIcon network="pinterest" style={{ height: 50, width: 50 }} /&gt;
&lt;SocialIcon network="pinterest" style={{ height: 100, width: 100 }} /&gt;
&lt;SocialIcon network="pinterest" style={{ height: 200, width: 200 }} /&gt; </pre>
</code>

<h2>Feedback</h2>
<p>If you're interested in adding additional networks or helping make the library better, <a href="https://github.com/jaketrent/react-social-icons">fork it on github</a> and let the code fly!</p>

<footer class="footer">
<p>
<a href="https://github.com/jaketrent/react-social-icons/blob/master/LICENSE.md">MIT Licensed</a>
- from
<a href="https://jaketrent.com">Jake Trent</a>
</p>
</footer>
</div>
<div id="page" class="container"></div>

<script type="module" src="./app.js"></script>
</body>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"build": "babel -d ./build ./src",
"build:watch": "npm run build -- --watch",
"examples:serve": "parcel examples/index.html",
"examples:build": "parcel build examples/index.html",
"prepublish": "NODE_ENV=production npm run build",
"start": "npm run examples:serve",
"test": "mocha",
Expand Down

0 comments on commit 56baf3f

Please sign in to comment.