ajwann / css-spinners-react Goto Github PK
View Code? Open in Web Editor NEWReact adaptation of John W. Long's (jlong) css-spinners library
Home Page: https://www.npmjs.com/package/css-spinners-react
License: Other
React adaptation of John W. Long's (jlong) css-spinners library
Home Page: https://www.npmjs.com/package/css-spinners-react
License: Other
Now that the basic POC is complete, it would be nice to have a test suite to test future changes.
A great way to test that your React components render, and also test that they render the same way across changes, is snapshot tests. There are links to all the tutorials and guides you should need to set up Jest and write basic snapshot tests at the bottom of this issue.
We need a single snapshot test for each component. Each test will end up looking something like:
it('renders and nothing has changed', () => {
const dots = renderer.create(<Dots />).toJSON();
expect(dots).toMatchSnapshot();
});
Here is a link to the official Jest setup instructions
Here is a link with a more in depth description about snapshot tests
Here is a link with a good amount of official examples
It would be nice to add eslint, and adopt a popular style guide from a prominent React shop,
like Facebook or AirBnB.
We can follow these steps to install eslint:
https://eslint.org/docs/user-guide/getting-started
Once eslint is installed, we can install the external eslint rule package by following these steps:
https://www.npmjs.com/package/eslint-config-airbnb
The key step in that readme is "Add "extends": "airbnb"
to your .eslintrc"
**If you get stuck on this second step, take a look at one of my other project's eslintrc files for guidance.
Each spinner is just a div
element with a css class applied. Since using inline css styles is popular in the React world, it would be nice to support this by letting users pass arbitrary props to be set on these div
elements.
Users would pass props like so:
<Dots style="width:100px;" ...props />
Each spinner will need to be updated to just apply any props passed into it via use of the spread operator. For example, the Dots
component would look something like:
// whatever imports each component currently have should stay the same
const Dots = (props) => {
render(
<div className="dots-loader" ...props />
</div>
)
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.