Add an example CSS (basic) theme (#472)

* Let web target be implied, else it will includes require in react-refresh build

* Add an example theme

* Update theme/basic/README.md

Co-authored-by: AdeleD <adele.delamarche@gmail.com>

* Update theme/basic/README.md

Co-authored-by: AdeleD <adele.delamarche@gmail.com>

---------

Co-authored-by: AdeleD <adele.delamarche@gmail.com>

Author: MonsieurV

demo/webpack.config.js

@@ -12,7 +12,6 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 console.log(`Webpack demo ${isDevelopment ? 'dev' : 'prod'}`);
 
 module.exports = {
-  target: 'node',
   entry: [
     'webpack-hot-middleware/client',
     path.resolve(dir_demo_js, 'demo.js'),
@@ -35,6 +34,7 @@ module.exports = {
     rules: [
       {
         test: dir_demo_js,
+        // test: /\.js?$/,
         exclude: /node_modules/,
         use: [
           {

theme/basic/README.md

@@ -0,0 +1,30 @@
+# Basic CSS theme
+
+## How to use it
+
+Add the `theme/basic/react-paginatte.css` file to your HTML page. For eg., after downloading it and making it available on your server as `/assets/css/react-paginate.css`:
+
+```html
+<link href="/assets/css/react-paginate.css" rel="stylesheet" />
+```
+
+Then load the `ReactPaginate` component by specifying the `className` prop to `react-paginate`. This will add the class to the `<ul>` container:
+
+```javascript
+import ReactPaginate from 'react-paginate';
+
+
+function MyExampleApp() {
+  // Manage offsets, page clicks, etc. ... (See main README.md)
+
+  return (
+    <>
+      <h2>Paginated page</h2>
+      <ReactPaginate
+        className="react-paginate"
+        //  ...
+      />
+    </>
+  );
+}
+```

theme/basic/react-paginate.css

@@ -0,0 +1,33 @@
+ul.react-paginate {
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  list-style-type: none;
+  padding: 0 5rem;
+}
+
+ul.react-paginate li a {
+  border-radius: 7px;
+  padding: 0.1rem 1rem;
+  border: gray 1px solid;
+  cursor: pointer;
+}
+ul.react-paginate li.previous a,
+ul.react-paginate li.next a,
+ul.react-paginate li.break a {
+  border-color: transparent;
+}
+ul.react-paginate li.selected a {
+  background-color: #0366d6;
+  border-color: transparent;
+  color: white;
+  min-width: 32px;
+}
+ul.react-paginate li.disabled a {
+  color: grey;
+}
+ul.react-paginate li.disable,
+ul.react-paginate li.disabled a {
+  cursor: default;
+}

webpack.config.js

@@ -23,11 +23,6 @@ const config = {
   },
   module: {
     rules: [
-      // {
-      //   use: 'react-hot-loader/webpack',
-      //   test: dir_js,
-      //   exclude: dir_node_modules,
-      // },
       {
         use: 'babel-loader',
         test: dir_js,