1 |
|
2 | Copyright (c) 2018 Swashata Ghosh <swashata@wpquark.com>
|
3 |
|
4 | This software is released under the MIT License.
|
5 | https://opensource.org/licenses/MIT
|
6 | -->
|
7 |
|
8 | # React FontIconPicker Component
|
9 |
|
10 | [![codecov](https://codecov.io/gh/fontIconPicker/react-fonticonpicker/branch/master/graph/badge.svg)](https://codecov.io/gh/fontIconPicker/react-fonticonpicker) [![Build Status](https://travis-ci.org/fontIconPicker/react-fonticonpicker.svg?branch=master)](https://travis-ci.org/fontIconPicker/react-fonticonpicker) [![jest](https://facebook.github.io/jest/img/jest-badge.svg)](https://github.com/facebook/jest) [![npm version](https://badge.fury.io/js/%40fonticonpicker%2Freact-fonticonpicker.svg)](https://badge.fury.io/js/%40fonticonpicker%2Freact-fonticonpicker) [![peerDependencies Status](https://david-dm.org/fontIconPicker/react-fonticonpicker/peer-status.svg)](https://david-dm.org/fontIconPicker/react-fonticonpicker?type=peer) [![GitHub license](https://img.shields.io/github/license/fontIconPicker/react-fonticonpicker.svg)](https://github.com/fontIconPicker/react-fonticonpicker/blob/master/LICENSE)
|
11 |
|
12 | -------------------------
|
13 |
|
14 | [![FontIconPicker](fonticonpicker.png)](fonticonpicker.png)
|
15 |
|
16 | A react version of [fontIconPicker](https://fonticonpicker.github.io). This is
|
17 | rewritten and is not a wrapper around jQuery version.
|
18 |
|
19 | With FontIconPicker component you can present an UI where people can pick one or
|
20 | more fonts. In bare-bone it looks like this.
|
21 |
|
22 | ## Installation
|
23 |
|
24 | ### NPM or YARN
|
25 |
|
26 | NPM is the preferred way of installation. You can find it from [here](https://www.npmjs.com/package/@fonticonpicker/react-fonticonpicker).
|
27 |
|
28 | From your project do
|
29 |
|
30 | ```bash
|
31 | npm i @fonticonpicker/react-fonticonpicker
|
32 | ```
|
33 |
|
34 | Also install the peer dependencies yourself.
|
35 |
|
36 | ```bash
|
37 | npm i react react-dom classnames prop-types react-transition-group
|
38 | ```
|
39 |
|
40 | And require the file.
|
41 |
|
42 | #### ES6
|
43 |
|
44 | ```js
|
45 | import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
|
46 | ```
|
47 |
|
48 | #### ES5
|
49 |
|
50 | ```js
|
51 | const FontIconPicker = require('@fonticonpicker/react-fonticonpicker');
|
52 | ```
|
53 |
|
54 | And use it as React Component. Check the [documentation site](http://fonticonpicker.github.io/react-fonticonpicker/) for more example.
|
55 |
|
56 |
|
57 | ### CDN
|
58 |
|
59 | For some reason, if you'd prefer the CDN, then it is available at [unpkg.com](https://unpkg.com/@fonticonpicker/react-fonticonpicker/dist/).
|
60 |
|
61 | Place them in your HTML document, along with UMD builds of peer dependencies.
|
62 |
|
63 | ### Download Source
|
64 |
|
65 | We distribute production version of source file through [github releases](https://github.com/fontIconPicker/react-fonticonpicker/releases). Head over there
|
66 | and download `fonticonpicker.react.zip` file.
|
67 |
|
68 | ## Usage
|
69 |
|
70 | Here is an example for use with the [create-react-app](https://github.com/facebook/create-react-app).
|
71 |
|
72 | From your project directory do:
|
73 |
|
74 | ```bash
|
75 | yarn add classnames prop-types react-transition-group @fonticonpicker/react-fonticonpicker
|
76 | ```
|
77 |
|
78 | Now edit your `App.js` file to include the following.
|
79 |
|
80 |
|
81 | ```js
|
82 | import React, { Component } from 'react';
|
83 | import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
|
84 | import logo from './logo.svg';
|
85 | import './App.css';
|
86 | import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
|
87 | import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css';
|
88 |
|
89 | class App extends Component {
|
90 | constructor(props) {
|
91 | super(props);
|
92 | this.state = {
|
93 | value: 'fipicon-angle-left',
|
94 | };
|
95 | }
|
96 | handleChange = (value) => {
|
97 | this.setState({ value });
|
98 | }
|
99 | render() {
|
100 | const props = {
|
101 | icons: ['fipicon-angle-left', 'fipicon-angle-right', 'fipicon-angle-up', 'fipicon-angle-down'],
|
102 | theme: 'bluegrey',
|
103 | renderUsing: 'class',
|
104 | value: this.state.value,
|
105 | onChange: this.handleChange,
|
106 | isMulti: false,
|
107 | };
|
108 | return (
|
109 | <div className="App">
|
110 | <header className="App-header">
|
111 | <img src={logo} className="App-logo" alt="logo" />
|
112 | <h1 className="App-title">Welcome to React</h1>
|
113 | </header>
|
114 | <FontIconPicker {...props} />
|
115 | </div>
|
116 | );
|
117 | }
|
118 | }
|
119 |
|
120 | export default App;
|
121 | ```
|
122 |
|
123 | [![create-react-app](create-react-app.png)](create-react-app.png)
|
124 |
|
125 | This will render a basic FontIconPicker component. For advanced usage, follow
|
126 | the [documentation](https://fonticonpicker.github.io/react-fonticonpicker/).
|
127 |
|
128 | ## Props
|
129 |
|
130 | | Prop | Type | Required | Default |
|
131 | |------|------|-----------|---------|
|
132 | | icons | `object` of `array` or `array` | yes | N/A |
|
133 | |onChange| `func` | yes | N/A |
|
134 | | search | `object` of `array` or `array`| no | `null`|
|
135 | |iconsPerPage| number | no | `20` |
|
136 | |theme | `string` | no | `'default'`|
|
137 | | showCategory| `bool` | no | `true` |
|
138 | | showSearch | `bool` | no | `true` |
|
139 | | value | `array` or `string` | no | null |
|
140 | | isMulti | `bool` | no | `false` |
|
141 | | renderUsing | `string` | no | `'class'` |
|
142 | | convertHex | `bool` | no | `true` |
|
143 | | renderFunc | `func` | no | null |
|
144 | | appendTo | `string` | no | false |
|
145 | | allCatPlaceholder | `string` | no | `'Show from all'` |
|
146 | | searchPlaceholder | `string` | no | `'Search Icons'` |
|
147 | | noIconPlaceholder | `string` | no | `'No icons found'` |
|
148 | | noSelectedPlaceholder | `string` | no | `'Select icon'` |
|
149 |
|
150 |
|
151 | ## Development Environment
|
152 |
|
153 | Development & Build is done with the help of [webpack](https://webpack.js.org/).
|
154 |
|
155 | First fork and git clone the repo on your machine.
|
156 |
|
157 | ```bash
|
158 | git clone git@github.com:<username>/react-fonticonpicker.git
|
159 | ```
|
160 |
|
161 | Now install all the dependencies. Make sure you have [nodejs](https://nodejs.org/en/)
|
162 | version 9 or higher.
|
163 |
|
164 | ```bash
|
165 | npm install
|
166 | ```
|
167 |
|
168 | Now run the server with
|
169 |
|
170 | ```bash
|
171 | npm start
|
172 | ```
|
173 |
|
174 | This will open a webpack dev server with hot reload. You can access the server
|
175 | from [http://localhost:7770](http://localhost:7770).
|
176 |
|
177 | Now make changes in the component and see it live. Also add unit tests and
|
178 | integration tests where applicable.
|
179 |
|
180 | If your changes invalidates snapshots, then make sure to update them too (with
|
181 | good reasons).
|
182 |
|
183 | When doing a PR, try not to build the docs or the dist. It will create unnecessary
|
184 | merge conflict.
|
185 |
|
186 | Other npm commands at disposal:
|
187 |
|
188 | * `npm run test`: Runs `eslint` followed by `stylelint` and `jest` tests.
|
189 | * `npm run start`: Runs a dev server with hot reload.
|
190 | * `npm run docs`: Builds the docs for production.
|
191 | * `npm run build`: Builds the UMD & CSS files for distribution.
|
192 |
|
193 | ## Credits
|
194 |
|
195 | React FontIconPicker has been developed by [Swashata](https://swashata.me) mainly for in use with [eForm](https://eform.live).
|
196 | The original idea came from [jQuery FontIconPicker](https://github.com/fontIconPicker/fontIconPicker)
|
197 | by [Alessandro Benoit](http://codeb.it).
|
198 |
|
199 | None of these would have been possible without the cool [Wes Bos 🔥](https://wesbos.com/)
|
200 | and his [react for beginners course](https://reactforbeginners.com/). It is awesome 😉.
|