selectron-react
Version:
A select replacement component built with & for React
359 lines • 13.5 kB
HTML
<html>
<head>
<link rel="stylesheet" href="selectron.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<style>
body {
font-family: Open Sans, sans-serif;
font-size: 14px;
font-weight: 400;
color: #263238;
margin: 0;
}
h1 {
font-weight: normal;
font-size: 20px;
margin-top: 60px;
margin-bottom: 10px;
font-weight: 400;
}
h1:first-child {
margin-top: 0;
}
.selectron {
max-width: none
}
.container {
max-width: 400px;
padding: 60px 10px;
margin: 0 auto;
}
.container--wide {
max-width: 900px;
}
.container--medium {
max-width: 600px;
}
dl {
margin: 0 0 10px;
padding: 0;
}
dt {
font-weight: 400;
color: #FE5E64;
}
dd {
margin: 0;
font-size: 12px;
color: #9B9B9B;
}
table {
width: 100%;
border-collapse: collapse;
}
tr {
background-color: #fff;
}
td,th {
border: 1px solid #FE5E64;
padding: 10px;
text-align: left;
}
th {
background-color: #FE5E64;
color: #fff;
font-weight: 300;
}
header {
background-color: #FE5E64;
color: #fff;
}
header h1 {
font-size: 56px;
font-weight: 300;
margin: 0;
}
header p {
font-size: 20px;
font-weight: 300;
margin: 0 0 20px;
color: rgba(255,255,255,.75);
}
header p em {
font-weight: 400;
}
.github-button {
display: none;
}
footer {
background-color: #263238;
color: #fff;
text-align: center;
padding: 20px;
}
.code {
background-color: #263238;
color: #fff;
padding: 10px;
overflow: auto;
}
pre {
margin: 0;
}
@media (max-width: 767px) {
header h1 {
font-size: 40px;
}
.container {
padding: 40px 10px;
}
thead {
display: none;
}
tbody, tr {
display: block;
font-size: 12px;
}
td {
border: none;
border-bottom: 1px solid #efefef;
padding: 5px 10px;
display: flex;
}
td div {
flex: 2;
}
td:last-child {
border-bottom: none;
}
td::before {
content: attr(data-title);
text-transform: capitalize;
color: #FE5E64;
font-weight: 600;
flex: 1;
margin-right: 20px;
}
tr {
margin-bottom: 10px;
border: 1px solid #FE5E64;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Selectron React</h1>
<p>A <em>simple</em> select replacement component built with & for React.Js</p>
<a class="github-button" href="https://github.com/dahliacreative" data-show-count="true" aria-label="Follow @dahliacreative on GitHub">Follow @dahliacreative</a>
<a class="github-button" href="https://github.com/dahliacreative/selectron-react/subscription" data-show-count="true" aria-label="Watch dahliacreative/selectron-react on GitHub">Watch</a>
<a class="github-button" href="https://github.com/dahliacreative/selectron-react" data-show-count="true" aria-label="Star dahliacreative/selectron-react on GitHub">Star</a>
<a class="github-button" href="https://github.com/dahliacreative/selectron-react/fork" data-show-count="true" aria-label="Fork dahliacreative/selectron-react on GitHub">Fork</a>
<a class="github-button" href="https://github.com/dahliacreative/selectron-react/issues" data-show-count="true" aria-label="Issue dahliacreative/selectron-react on GitHub">Issue</a>
</div>
</header>
<div class="container container--medium">
<h1>Installation</h1>
<p class="code"><code>npm install selectron-react</code></p>
or
<p class="code"><code>yarn add selectron-react</code></p>
</div>
<div style="background-color: #efefef;">
<div class="container container--medium">
<h1>Usage</h1>
<div class="code">
<pre><code><Selectron
options={[{
value: 'England',
label: 'England'
},{
value: 'Wales',
label: 'Wales'
},{
value: 'Scotland,
label: 'Scotland'
},{
value: 'Northern Ireland',
label: 'Northern Ireland'
}]}
onChange={(value) => {this.setState({value})}}
value={this.state.value}/></code></pre>
</div>
</div>
</div>
<div class="container">
<h1>Default Select</h1>
<dl>
<dt>Props</dt>
<dd>options, value, onChange</dd>
</dl>
<div id="default"></div>
<h1>Default Select, ajaxed options</h1>
<dl>
<dt>Props</dt>
<dd>options, value, onChange, onSearch</dd>
</dl>
<div id="default-ajax"></div>
<h1>Multi Select</h1>
<dl>
<dt>Props</dt>
<dd>multi, options, value, onChange</dd>
</dl>
<div id="multi"></div>
<h1>Multi Select, ajaxed options</h1>
<dl>
<dt>Props</dt>
<dd>multi, options, value, onChange, onSearch</dd>
</dl>
<div id="multi-ajax"></div>
</div>
<div style="background-color: #efefef;">
<div class="container container--wide">
<h1>Options</h1>
<table>
<thead>
<th>Prop</th>
<th>Type</th>
<th>Required</th>
<th>Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td data-title="prop"><div>
<code>options</code>
</div></td>
<td data-title="type"><div>
<code>array</code>
</div></td>
<td data-title="required"><div>Yes</div></td>
<td data-title="default"><div>
<code>[]</code>
</div></td>
<td data-title="description"><div>an array of option objects, requires <code>value</code> and <code>label</code> params</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>value</code>
</div></td>
<td data-title="type"><div>
<code>object</code> / <code>array</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>null</code>
</div></td>
<td data-title="description"><div>an option object / array of option objects, requires <code>value</code> and <code>label</code> params</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>onChange</code>
</div></td>
<td data-title="type"><div>
<code>function</code>
</div></td>
<td data-title="required"><div>Yes</div></td>
<td data-title="default"><div>
<code>() => {}</code>
</div></td>
<td data-title="description"><div>a function to be called when the select changes, recieves <code>value</code> as param</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>onSearch</code>
</div></td>
<td data-title="type"><div>
<code>function</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"></td>
<td data-title="description"><div>a function to be called when the user searches, recieves <code>term</code> as param. used for ajaxing in options</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>multi</code>
</div></td>
<td data-title="type"><div>
<code>bool</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>false</code>
</div></td>
<td data-title="description"><div>allow multiple options</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>placeholder</code>
</div></td>
<td data-title="type"><div>
<code>string</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>Please select...</div></td>
<td data-title="description"><div>placeholder to display</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>clearable</code>
</div></td>
<td data-title="type"><div>
<code>bool</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>true</code>
</div></td>
<td data-title="description"><div>wether the user can clear the select once an option is sselected</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>searchable</code>
</div></td>
<td data-title="type"><div>
<code>bool</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>true</code>
</div></td>
<td data-title="description"><div>wether the user can search to filter the list</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>required</code>
</div></td>
<td data-title="type"><div>
<code>bool</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>false</code>
</div></td>
<td data-title="description"><div>adds HTML5 required attribute to inputs</div></td>
</tr>
<tr>
<td data-title="prop"><div>
<code>name</code>
</div></td>
<td data-title="type"><div>
<code>string</code>
</div></td>
<td data-title="required"><div>No</div></td>
<td data-title="default"><div>
<code>selectron-react-value</code>
</div></td>
<td data-title="description"><div>HTML name attribute added to the hidden input</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>© 2017 @dahliacreative</footer>
<script src="examples.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>